* { box-sizing: border-box; }

body, html, div { width: 100%; height: 100%; overflow: hidden; margin: 0; padding: 0; }

body { background: #001848; font-family: Helvetica, Arial, sans-serif; font-size: 18px; line-height: 150%; }

.button { display: inline-block; margin: 5px; padding: 8px 15px; border-radius: 4px; background: #333; color: #fff; text-decoration: none; }
  .button:hover, .button:focus { background: darkgoldenrod;}

.button2 { background: darkgoldenrod; font-style: italic; font-family: serif; }
  .button2:hover, .button2:focus { background: #333; }

.loading { border: none; outline: none; background: url('../loader.gif') no-repeat center center; color: transparent; }
  .loading * { visibility: hidden; }
  
#moon {
  position: absolute; left: 0; top: 0; z-index: 1;
  width: 100%; height: 100%; border: none;
}

#mountains { position: fixed; bottom: 0; left: 0; z-index: 2; width: 100%; height: 100%; overflow: hidden; }
  #mountains canvas { position: absolute; bottom: 0; right: 0; width: 100%; min-width: 1024px; height: auto; }

#countdown { 
  position: absolute; z-index: 3; top: calc(50% - 15vw); left: 0;
  width: 100%; text-align: center;
  color: #fff; font-size: 15vw; font-family: monospace; text-shadow: 0 2px 2px #666;
}
  #countdown span:before { content: ':'; }
  #countdown span:first-child:before { content: ''; }

#location, #play { position: absolute; top: 5px; left: 5px; z-index: 4; }
  #location p { color: white; }
  #location *, #play { font-size: 110%; }

#play { display: none; z-index: 5; }

#info { 
  position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 6; overflow: auto;
  display: none; padding: 25%;
  background: #fff; color: #333;
}
  
#infoOpen, #infoClose { position: absolute; bottom: 0; right: 0; z-index: 7; }

@media(max-width:800px){
  #info { padding: 25% 10%; }
}