@font-face {
 font-family: reg;
 src: url('site/lato.ttf');
 }
@font-face {
 font-family: thicc;
 src: url('site/latohead.ttf');
 }
body, html {
 font-family: reg;
 margin: 0;
 padding: 0;
 font-size: 2vmax;
 letter-spacing: 0.03em;
 line-height: 120%;
 vertical-align: top;
 background-color: #000;
 background-image: url('site/bg.png'), url('site/bg2.png');
 background-position: top left, top right;
 background-size: auto 100vh;
 background-repeat: no-repeat;
 background-attachment: fixed;
 color: #f8f8f8;
}

a { color: #8af; text-decoration: none; text-shadow: #000 2px 0 0, #000 -2px 0 0; }

.sectionhead { font-size: 150%; font-family: thicc; }
table, input { font-size: inherit; }
textarea { width: 100%; height: 30vmin; font-size: inherit;}

div.topbar {
 width: 120vw;
 height: 10vmin;
 border-bottom: solid 1px #fff;
 position: fixed;
 top: 0;
 left: -10vw;
 background-color: rgba(128,128,128,0.25);
 backdrop-filter: blur(1vmin);
 }
img.logo {
 height: 11.5vmin;
 width: auto;
 position: fixed;
 top: 1vmin;
 left: calc(25vw - 22vmin);
 }
 
div.accountbar {
 font-size: 3vmin;
 line-height: 4vmin;
 position: fixed;
 top: 1vmin;
 right: calc(25vw - 22vmin);
 width: 50%;
 text-align: right;
}
img.menu {
 height: 8vmin;
 width: auto;
 float: right;
 background-color: rgba(0,0,0,0.5);
 border-radius: 1vmin;
 margin-left: 4vmin;
 cursor: pointer;
} 
div.topmenu {
 transition: right 0.5s;
 position: fixed;
 top: 10vmin;
 right: -100vw;
 padding: 2vmin;
 border: solid 1px #fff;
 font-family: thicc;
 background-color: rgba(128,128,128,0.25);
 backdrop-filter: blur(1vmin);
 border-radius: 0 0 1vmin 1vmin;
 }
div.main {
 width: calc(68vmin + 28vw);
 font-size: inherit;
 line-height: inherit;
 margin: 14vmin auto 0 auto;
 padding: 0 0 2vmin 0;
 min-height: calc(100vh - 14vmin);
}
div.boxrow {
 display: flex;
 justify-content: space-between;
 width: 100%;
 font-size: inherit;
 line-height: inherit;
 font-family: thicc;
 border: 0;
 margin: 0;
 padding: 0 0 2vmin 0;
}
div.half {
 width: 50%;
 font-size: inherit;
 line-height: inherit;
 border: 0;
 margin: 0;
 padding: 1vmin;
 max-height: 999999px;
}
div.third {
 width: 33%;
 font-size: inherit;
 line-height: inherit;
 border: 0;
 margin: 0;
 padding: 0;
 max-height: 999999px;
}
img.full {
 width: 100%;
 height: auto;
 padding: 0 0 0 0;
 }
img.whole {
 width: 100%;
 height: auto;
 padding: 0 0 0 0;
 }
img.eighty {
 width: 75vmin;
 height: auto;
 display: block;
 margin: auto;
}

div.quart {
 font-size: 100%;
 line-height: 130%;
 padding: 0 0 3vmin 0;
 width: 100%;
 font-family: thicc;
}
img.quart {
 float: left;
 width: 25%;
 padding: 0 2vmin 2vmin 0;
}
div.adbanner {
 width: 72.8vmin;
 height: 9vmin;
 background-color: #888;
 margin: auto;
 margin-bottom: 2vmin;
}
img.adbanner {
 width: 72.8vmin;
 height: 9vmin;
 background-color: #888;
 margin: auto;
 margin-bottom: 2vmin;
}
div.adrow {
 display: flex;
 justify-content: space-between;
 width: 80vmin;
 font-size: inherit;
 font-family: thicc;
 border: 0;
 margin: auto;
 padding: 0 0 2vmin 0;
}
img.adbox {
 width: 30vmin;
 height: 30vmin;
 background-color: #888;
 margin: auto;
 margin-bottom: 2vmin;
}

div.bottomback {
 width: 100%;
 border-top: solid 1px #fff; 
 background-color: rgba(128,128,128,0.25);
 backdrop-filter: blur(1vmin);
 color: #000;
}
div.bottom {
 font-size: 80%;
 line-height: 130%;
 width: 88vmin;
 margin: auto;
 padding: 2vmin 4vmin 2vmin 4vmin;
 text-align: center;
 color: #fff;
}
img.botlogo {
 width: 6vmin;
 height: auto;
}
div.botflex {
 display: flex;
 flex-wrap: wrap;
 font-size: 50%;
 line-height: 130%;
 text-align: left;
 justify-content: space-evenly;
}
span.bothead {
 font-family: thicc;
 color: #fff; 
}

div.sectionhead {
 padding: 2vmin 0 0 0;
 text-align: right;
}

td.accountleft {
 text-align: right;
 width: 15%;
}
td.accountright {
 text-align: left;
 width: 35%;
}
input.logtext {
 width: 100%;
}

div.comicbar {
 display: flex;
 width: 100%;
 justify-content: space-evenly;
}
img.comicbutt {
 width: 15vmin;
 height: 15vmin;
}