body {
    padding: 0;
    margin: 0;
	overflow:hidden;
}
canvas {
  display: block;
}


.arrow{
	border: 20px solid #ccc;
	width: 0; 
	height: 0;
left: 40px;
opacity:0.35;
top: 40px;
position:fixed;
z-index:4;
}


.arrow:hover{
	border: 20px solid white;
opacity:1;

}
.arrow.up {
	border-top: 0;
	border-left-color: transparent;
	border-right-color: transparent;
}
.arrow.down {
	border-bottom: 0;
	border-left-color: transparent;
	border-right-color: transparent;
}
.arrow.right {
	border-right: 0;
	border-top-color: transparent;
	border-bottom-color: transparent;
}
.arrow.left { 
	border-left: 0;
	border-top-color: transparent;
	border-bottom-color: transparent;
}


#loading 

{
display:block;width:100%;height:100vh;background:black;position:static;
color: white;
line-height: 100vh;
text-align: center;
font-family: Arial;
}


#hint 

{
font-size: 24px;
z-index: 1;
font-family: Arial;
width: 100vw;
height: 30px;
margin:0 auto;
position: fixed;
color: #ccc;
vertical-align: middle;
text-align: center;

}



  @media (min-width:320px)  { 
  
  
  #hint 

{
font-size: 20px;
margin-top: 50px;

}


  }