/*global styles*/
*{
  -ms-overflow-style:none;
  scrollbar-width:none;
  appearance:none;
  user-select:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  -webkit-user-drag:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  image-rendering:pixelated;
  margin:0;
  border-style:none;
  border-width:0;
  padding:0;
  outline:none;
  border-radius:0;
  transform-origin:0 0;
}
*::-webkit-scrollbar{
  appearance:none;
  -webkit-appearance:none;
  display:none;
  width:0;
  background:transparent;
  touch-action:none;
}
html{
  position:fixed;
  left:0;top:0;
  width:100vw;
  height:100vh;
  overflow-x:hidden;
  overflow-y:scroll;
  background-color:white;
  touch-action:pan-y;
}
/*div to load all fonts*/
#fontcache{
  position:fixed;
  pointer-events:none;
  left:0;top:0;
  width:50vw;
  height:calc(200vw * 0.75);
  font-size:calc((100vw / 320) * 13);
  background-color:black;
  word-wrap:break-word;
  transform:scale(0.5);
}
@media(min-aspect-ratio:4/3){#fontcache{
  width:calc(0.5 *(133.333333vh));
  height:200vh;
  font-size:calc((133.333333vh / 320) * 13);
  left:50vw;
  transform:translate(-100%)scale(0.5);
}}
/*sample each font inside fontcache*/
#fontcache>p{color:white;}
#fontcache>p:nth-of-type(1){font-family:theb;}
#fontcache>p:nth-of-type(2){font-family:ts;}
#fontcache>p:nth-of-type(3){font-family:tsb;}
#fontcache>p:nth-of-type(4){font-family:tsbi;}
#fontcache>p:nth-of-type(5){font-family:tsi;}
#fontcache>p:nth-of-type(6){font-family:wdings;}
/*final render image*/
#ren,#problemBox{
  position:fixed;
  left:0;top:0;
  width:100vw;
  height:75vw;
  background-repeat:no-repeat;
  background-position:0 0;
  background-size:cover;
}
/*aspect ratios for window size*/
@media(min-aspect-ratio:4/3){#ren,#problemBox{
  width:133.333333vh;
  height:100vh;
  left:50vw;
  transform:translate(-50%);
}}
/*on-page console element*/
#cons{
  display:none;
  position:fixed;
  width:40vw;
  height:100vh;
  overflow:scroll;
  pointer-events:none;
  background-color:rgba(255,255,255,0.5);
}
/*stuff to not show */
canvas{
  display:none;
  image-rendering:-moz-crisp-edges;
  image-rendering:-webkit-crisp-edges;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}
#audioloader{display:none;}
/*all buttons are br's*/
br{
  content:'';
  appearance:none;
  display:block;
  background-color:gray;
  border-width:1px;
  border-style:solid;
  border-color:black;
}
/*directional pad*/
#dpad{
  position:fixed;
  width:50vw;
  height:50vw;
  background-color:chartreuse;
  bottom:0;
  opacity:.3;
}
#dpad>br{
  position:absolute;
  width:calc(33.333% - 2px);
  height:calc(33.333% - 2px);
}
/*inner directional touch buttons*/
#btnup{left:33.333%;}
#btnupri{right:0;}
#btnri{right:0;top:33.333%;}
#btndn{left:33.333%;top:33.333%;}
#btnle{top:33.333%;}
/*when pressed*/
#dpad>br[alt]{background-color:black;}
/*touch buttons*/
#tri{
  top:0;
  width:60%!important;
  right:calc(-100vw + 100%);
  height:25%!important;
}
#crc{
  top:25%;
  width:60%!important;
  right:calc(-100vw + 100%);
  height:25%!important;
}
#crx{
  top:50%;
  width:60%!important;
  right:calc(-100vw + 100%);
  height:25%!important;
}
#sqr{
  top:75%;
  width:60%!important;
  right:calc(-100vw + 100%);
  height:25%!important;
}
#cursors>br{
  content:'';
  position:fixed;
  left:0;bottom:0;
  width:0px;
  height:0px;
  border-width:3px;
  border-style:solid;
  border-color:red;
  pointer-events:none;
  opacity:0.2;
}
@media(min-aspect-ratio:1/1){
  #dpadchk{
    width:calc((100vh - ((100vw / 3) * 0.75)) * (4 / 3) / 10);
    height:calc((100vh - ((100vw / 3) * 0.75)) * (4 / 3) / 10);
  }
  #dpadchk::after{
    left:calc((100vh - ((100vw / 3) * 0.75)) * (4 / 3) / 10);
  }
  #dpad{
    width:calc(100vh / 3);
    height:calc(100vh / 3);
    left:0;
  }
}
@media(min-aspect-ratio:4/3){
  #dpadchk{
    width:calc((100vw - ((100vh / 3) * (4 / 3))) / 10);
    height:calc((100vw - ((100vh / 3) * (4 / 3))) / 10);
  }
  #dpadchk::after{
    left:calc((100vw - ((100vh / 3) * (4 / 3))) / 10);
  }
  #dpad{
    width:calc(100vh / 3);
    height:calc(100vh / 3);
    left:0;
  }
}
@media(min-aspect-ratio:9/5){
  #dpadchk{
    width:calc((100vh * (4 / 3))/10);
    height:calc((100vh * (4 / 3))/10);
  }
  #dpadchk::after{
    left:calc((100vh * (4 / 3))/10);
  }
  #dpad{
    width:calc(100vh / 3);
    height:calc(100vh / 3);
    left:0!important;
  }
}
#axes{
  position:fixed;
  display:flex;
  flex-direction:column;
}
#buttons{
  position:fixed;
  top:100px;
  display:flex;
  flex-direction:column;
}
#dpad{display:none;}


@keyframes hidefonts{
  0%  { opacity:100%; }
  99%  { opacity:100%; }
  100%{ opacity:0%;  }
}

#fontcache{
  animation-name:hidefonts;
  animation-duration:0.5s;
  opacity:0%;
}