body {
     margin: 0;
     background: black;
     touch-action: none;
   }
   
  #cursor { position:absolute; float:none; visibility:hidden;
  }
   
   .main { position: relative; }
   
   

   #hud {
     -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
   }
   
   #hud div {
    color: #DDDDDD;
    font-family: 'Puritan', "trebuchet ms";
    font-style: italic;
    font-size: 9pt;
    text-shadow: -1px 2.25px 6px black;
   }
   
  #hud a {
    
    color: #DDDDDD;
    font-family: 'Puritan', "trebuchet ms";
    text-decoration: none;
    font-style: italic;
    text-shadow: -1px 1.25px 1px black;
    cursor:pointer;
    
    padding-left: 1.25em;
    padding-right: 1.25em;
   }
   
  #hud  p {

    margin-top: 0.75em;
    margin-bottom: 0.75em;
    padding: 0;
    opacity: 0.9;  
   }
   
     #hud h2 {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    padding: 0;
    opacity: 0.9;  
    font-weight: normal;
   }
   
    #hud h1 {
    margin-top: 0.5em;
    margin-bottom: 0.25em;
    padding: 0;
    opacity: 0.9;  
    font-weight: normal;
   }
   
   #hud a:hover {
     color: #EEEEEE;
     opacity: 1;
   }
   
   #hud_tl {
     position: fixed;
     left: 1.5em;
     top: 0;
   }
   
   #hud_bl {
     position: fixed;
     bottom: 2em;
     left: 0em;
     padding-left: 4em;
     padding-bottom: 2em;
   }
   
   #hud_br {
     position: fixed;
     bottom: 1em;
     right: 0em;
     text-align: right;
     nbackground: #00000066;

     padding-bottom: 1em;
     padding-right: 4em;
   }



   
   #hud_bm {
     position: fixed;
     bottom: 3em;
     left: 0;
     width: 100vw;
     text-align: center;
   }
   
    #hud_tm {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     text-align: center;
   }
   
   
   #hud_tr {
     position: fixed;
     right: 2em;
     text-align: right;
     top: 0.5em;
   }
   
  #tree {

     bottom: 0;
     left: 0;

     padding-top: 50%;
   }
   
   #bottom {
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100vw;
     text-align: center;
     background: rgba(0,0,0,0.7);
     opacity: 1;
     padding-bottom: 15px;
     padding-top: 12px;
   }

      
   #snap {
     display: block; 
     position: absolute;
     left: 0;
     right: 0;
     width: 177.777vh;
     height: 100vh;
     z-index: -9;
     margin: 0 auto;
   }
   #over {
     display: block; 
     position: absolute;
     left: 0;
     right: 0;
     opacity: 50%;
     width: 177.777vh;
     height: 100vh;
     z-index: 9;
     margin: 0 auto;
   }
   
   
@media screen and (orientation: portrait) {
  canvas {
    width: 100vw;
    height: 56.25vw;
    top: 30vh;
  }
}   
   
   video::-webkit-media-controls-enclosure {
  display:none !important;
}
  video::media-controls-container {
  display:none !important;
}

video::-webkit-media-controls {
  display: none;
  -webkit-appearance: none;
}