html, body { width: 100%; height: 100%; background-color: #ade9c1; }

@font-face { font-family: "cfs"; src: url("../font/ClearfaceStd-Regular.otf"); }

#wrapper { opacity: 0; width: 100%; height: 100%; min-width: 600px; min-height: 600px; padding-top: 20vh; box-sizing: border-box;}

.bottomleft { width: 105px; height: 103px; position: absolute; bottom: 20px; left: 20px; background: url("../img/bottomleft.png") top left no-repeat; background-size: 100% 100%; }
.bottomright { width: 105px; height: 103px; position: absolute; bottom: 20px; right: 20px; background: url("../img/bottomright.png") top left no-repeat; background-size: 100% 100%; }
.topright { width: 105px; height: 103px; position: absolute; top: 20px; right: 20px; background: url("../img/topright.png") top left no-repeat; background-size: 100% 100%; }
.topleft { width: 105px; height: 103px; position: absolute; top: 20px; left: 20px; background: url("../img/topleft.png") top left no-repeat; background-size: 100% 100%; }

#copy { text-align: center; }
h2 { text-align: center; font: normal 40px "cfs";margin-bottom: 1em;}
h1 { text-align: center;font: normal 100px "cfs";margin-bottom: 10px;}
#copy img { display: block;margin: 0px auto 70px auto;}
#copy a {font: normal 20px "cfs"; background: white;display: inline-block; margin: 0 auto; border: 1px solid black;padding: 16px 20px 10px 24px; box-sizing: border-box; cursor: pointer; letter-spacing: 0.2em;}
#copy a:hover { background-color: black; color: white; }

#socialbuttons { width: 76px; height: 30px; position: absolute; bottom: 20px; left: calc(50% - 38px); }

.social { position: absolute; top: 0px; width: 30px; height: 30px;}
.social img { display: block; width: 100%; height: 100%; }
#twitter { left: 0px; background: url("../img/twitter.png") center center no-repeat; }
#facebook { left: 50px; background: url("../img/facebook.png") center center no-repeat; }