*{
    	-webkit-user-select: none;
  	-khtml-user-select: none;
  	-moz-user-select: -moz-none;
  	-o-user-select: none;
  	-ms-user-select: none;
  	user-select: none;
  	-webkit-user-drag: none; 
 	-user-drag: none; 
    	-webkit-touch-callout: none;
        pointer-events:none;
        touch-action:none;
        -webkit-tap-highlight-color: rgba(0,0,0,0); 
        
        
}
#container { display:block; }
@media only screen and (orientation:portrait){
  #container {
    height: 100vw;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}
@media only screen and (orientation:landscape){
  #container {
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     -ms-transform: rotate(0deg);
     transform: rotate(0deg);
  }
}

@font-face{
     font-family: retrofont;
     src: url(PressStart2P.ttf);
}
@font-face{
     font-family: retrofont;
     src: url(PressStart2P.woff);
}
body{
        font-family:retrofont, Futura;
	background-color:black;
        overflow: hidden;
        height: 100%;
        position: fixed;
        width:100%;
}	
        
canvas{
	position:absolute;
	top:0; 
        left:0;
  	-webkit-transform: translateZ(0);
  	-moz-transform: translateZ(0);
   	-ms-transform: translateZ(0);
   	-o-transform: translateZ(0);
   	transform: translateZ(0);
}


button{
	color:black;
	font-family:retrofont, Futura;
        pointer-events:auto;
	font-size:2.5vw;
	border:none;
	border-style:outset;
	background:rgba(128,64,0,0);
	position:absolute;
	z-index:150;
	display:none;
}
button:active{
	-webkit-transform: translate(-5px,5px);
	-ms-transform: translate(-5px,5px);
	-moz-transform: translate(-5px,5px);
	transform: translate(-5px,5px);
	-webkit-filter:brightness(40%);
	filter:brightness(40%);
	border-style:inset;	
	
}
img{
	height:100%;
	width:auto;
	pointer-events:none;
	-webkit-transform: translateZ(0);
  	-moz-transform: translateZ(0);
   	-ms-transform: translateZ(0);
   	-o-transform: translateZ(0);
   	transform: translateZ(0);
}
/*#splashscreen{
   position: absolute;
   top: 2%;
   left: 50%;
  //border-color:black; 
   height:80%; 
   width:auto;
   transform:translateX(-50%);
   //transform:translate(-50%,-50%);
   //transform:translateY(-50%);    
}*/
#loadscreen{
    position: absolute;
    top: 2%;
   left: 50%;
   /*border-color:black;*/ 
   height:0; 
   width:auto;    
    transform:translateX(-50%);
   /*transform:translate(-50%,-48%);
   transform:translateY(-50%);   
   display: none;*/
   transition: opacity 10s;
   -ms-transition:opacity 10s;
   -webkit-transition: opacity 10s;
   -moz-transition: opacity 10s;

}
#titlescreen{
   position: absolute;
   top: 2%;
   left: 50%;
   border-color:black; 
  height:80%; 
   width:auto;  
     transform:translateX(-50%);
   /*transform:translate(-50%,-50%);*/
    display:none;
    /*transition:opacity 12s;
   transform:translateY(-50%);*/    
}
#kbdirections{
   position: absolute;
     top: 2%;
   left: 50%;
   border-color:black; 
   height:80%; 
   width:auto;   
    transform:translateX(-50%);
   /*transform:translate(-50%,-50%);*/
   display:none;
   /*transition:display 2s;
   transform:translateY(-50%);*/    
}
#tsdirections{
   position: absolute;
   top: 2%;
   left: 50%;
   border-color:black; 
   height:80%; 
   width:auto;  
    transform:translateX(-50%);
   /*transform:translate(-50%,-50%);*/
   display: none;
   /*transition:display 2s;
   transform:translateY(-50%);*/    
}
#GGLaughs{
   opacity:0;
   transition: opacity 4s;
   -ms-transition:opacity 4s;
   -webkit-transition: opacity 4s; 
   -moz-transition: opacity 4s;
   z-index:200;
   position: absolute;
   top: 50%;
   left: 50%;
   /*border-color:black;*/ 
   width:0;    
   height:auto;
   /*transform:translate(-50%,-60%);
   display: none;*/
   
}
#itsGremlin{
	z-index:201;
        position:absolute;
        top:2%;
	left:0;
	width:35vw;
        height:auto;
        display:none;
}