* { margin: 0px; padding: 0px; font-family: Verdana, Geneva, sans-serif; color: #000000; border: 0px; }



html { overflow-y:scroll; }

body { max-width: 100%; background-color: #ffffff; }

img { user-drag: none; user-select: none; }



a { color: #fff; text-decoration: none; }



/*  text-shadow: 1px 1px #999;  */



.top { background-color: #fff; font-size: 0px; }

.top img { padding: 6px; vertical-align: text-top; }



.left { float: left; }

.right { float: right; }

.clearfix:after { content: ""; display: block; clear: both; }



#splash { font-size: 0px; }

#splash video { object-fit: cover; width: 100%; display: block; }



/* #logo { height: 0px; width: 50%; margin: 0 auto; } */

#logo { height: 0px; width: 40%; }

#logo img { position: relative; width: 100%; top: 0px; z-index: 1; }



#signup { height: 0px; width: 40%; margin: 0 0 0 auto; }

#signup img { position: relative; width: 100%; -webkit-transform: translate(-02%, -70%); z-index: 1; pointer-events: none; }

#signup img .over { cursor: hand; cursor: pointer; }



@media screen and (min-width: 1201px) { .nav { font-size: 1.5em; } }

@media screen and (max-width: 1200px) { .nav { font-size: 2vw; } }

.nav { text-align: center; font-weight: bolder; text-shadow: none; margin: 8px; }

.nav ul { list-style-type: none; display: block; }

.nav li { display: inline-block; max-width: 235px; width: 20%;  overflow: hidden;}

.nav li a { display: block; text-align: center; padding-top: 20%; padding-bottom: 20%;}



@media screen and (min-width: 1201px) { .charnav { font-size: 1em; } }

@media screen and (max-width: 1200px) { .charnav { font-size: 1.5vw; } }

.charnav { font-weight: bolder;  color: #999; margin: 8px; }

.charnav a { color: #444; }

.charnav a:hover { color: #999; }





.orange { background-color: #eda700; text-shadow: 2px 2px #be8600; }

.orange a:hover { background-color: #e5ed00; }

.orange.charbox:hover { background-color: #e5ed00; }



.green { background-color: #00ed64; text-shadow: 2px 2px #00be50; }

.green a:hover { background-color: #8ced00; }

.green.charbox:hover { background-color: #8ced00; }



.blue { background-color: #00eded; text-shadow: 2px 2px #00bebe; }

.blue a:hover { background-color: #009eed; }

.blue.charbox:hover { background-color: #009eed; }



.pink { background-color: #ed0070; text-shadow: 2px 2px #be005a; }

.pink a:hover { background-color: #ed0000; }

.pink.charbox:hover { background-color: #ed0000; }



.hotpink { background-color: #f14ca6; text-shadow: 2px 2px #be005a; }

.hotpink a:hover { background-color: #cf4ef2; }

.hotpink.charbox:hover { background-color: #cf4ef2; }



.turquoise { background-color: #18d3b8; text-shadow: 2px 2px #be005a; }

.turquoise a:hover { background-color: #18d379; }

.turquoise.charbox:hover { background-color: #18d379; }



.black { background-color: #000000; text-shadow: 2px 2px #333333; }

.black a:hover { background-color: #111111; }

.black.charbox:hover { background-color: #111111; }



#jaggie-top { position: absolute; width: 100%; height: 64px; background-image: url("images/jaggie_top.png"); z-index: 1; }

#jaggie-bot { position: absolute; width: 100%; height: 64px; background-image: url("images/jaggie_bot.png"); z-index: 1; -webkit-transform: translate(0, -100%); }



.content { max-width: 969px; margin: 0 auto; font-size: 1.1em; /*text-shadow: 0px 2px #fff;*/ }

.content p { padding: 10px 10px; color: #222; }

.content h1 { padding: 10px; font-size: 1.2em; color: white; /*-webkit-transform: translate(-8px, -8px);*/ }

.content h2 { text-align: center;}

.content .box { background-color: #F0F0F0; margin: 8px 8px; }

.content p a { color: #008aff; font-weight: bold; }

.content p a:hover { color: #55aeff; }

.content .center { text-align: center; margin-left: auto; margin-right: auto; padding: 0px; }

.content img { max-width:100%; height:auto; }



@media screen and (min-width: 1201px) { .footer { font-size: 1.0em; } }

@media screen and (max-width: 1200px) { .footer { font-size: 1.3vw; } }

@media screen and (max-width: 800px) { .footer { font-size: 0.6em; } }

.footer { max-width: 969px; margin: 0 auto;  }

.footer p { width: 100%; text-align: center; padding: 10px 10px; color: rgb(90, 90, 90); }

.footer p a { color: #008aff; font-weight: bold; }

.footer p a:hover { color: #55aeff; }



.charbox { margin: 8px 0px; }

.charbox img { width: 238px; height: 238px; }



.ittle { background-image: url("images/ittle.png"); background-size: cover; }

.ruby { background-image: url("images/ruby.png"); background-size: cover; }

.fox { background-image: url("images/fox.png"); background-size: cover; }

.jin { background-image: url("images/jin.png"); background-size: cover; }

.rem { background-image: url("images/rem.png"); background-size: cover; }

.bcm { background-image: url("images/bcm.png"); background-size: cover; }

.god { background-image: url("images/god.png"); background-size: cover; }

.asha { background-image: url("images/asha.png"); background-size: cover; }

.frall { background-image: url("images/frall.png"); background-size: cover; }

.tetron { background-image: url("images/tetron.png"); background-size: cover; }

.orka { background-image: url("images/orka.png"); background-size: cover; }

.who { background-image: url("images/who.png"); background-size: cover; }



.curve-right { background-image: url("images/br_curve.png"), url("images/tr_curve.png"); background-repeat: no-repeat, no-repeat; background-position: bottom right, top right; margin-right: 64px; }

.curve-left { background-image: url("images/bl_curve.png"), url("images/tl_curve.png"); background-repeat: no-repeat, no-repeat; background-position: bottom left, top left; margin-left: 64px; }



.box video { padding: 8px; flex-shrink: 0; max-width: 40%; display: block;}

.flex { display: flex; align-items: stretch; }

.table { display: table; }

.cell { display: table-cell; }



.inventory { display: flex; flex-wrap: wrap; padding: 8px; }

.inventory img { border: 4px solid #eee; margin: 0px 4px; }

.inventory img:hover { border-color: #fff; }

.hand { cursor: hand; cursor: pointer; }



.box h4 { padding-left: 16px; text-decoration: underline; }

.bloglink { text-align: center; }

.bloglink a { display: block; padding: 8px; }

.bloglink span { color: #CCCCCC; }

.dark a { background-color: #383838; }

.darker a { background-color: #282828; }

.dark a:hover { font-weight: bold; }

.darker a:hover { font-weight: bold; }



.content pre { margin-left: 48px; }

pre { font-size: 0.6em; }



.resp-container-16-9 {

    position: relative;

    overflow: hidden;

    padding-top: 56.25%;

}



.resp-container {

    position: relative;

    overflow: hidden;

    padding-top: 30%;

}



.resp-iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    border: 0;

}