@font-face {
  font-family: 'VCR OSD Mono';
  src: url('VCR_OSD_MONO_1.001.eot');
  src: url('VCR_OSD_MONO_1.001.eot?#iefix') format('embedded-opentype'),
       url('VCR_OSD_MONO_1.001.woff') format('woff'),
       url('VCR_OSD_MONO_1.001.ttf')  format('truetype'),
       url('VCR_OSD_MONO_1.001.svg#484c29527d9efc96212632a686eaea09') format('svg');
       
  font-style: normal;
  font-display: auto;
  font-weight:  400;
}

html, body {
	width: 100%;
	height: 100%;
  margin: 0px;
  padding: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
  background-color: #0000FF;
}

.black-over {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color:rgba(0,0,0,0.85);
}

.container {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #0000FF;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: left;
  justify-content: space-between;
  flex-direction: column;
  /*padding: 1em 1em 2em 3em;*/
  background-image: url(bvw.jpg);
  background-size: cover;
  background-position: top center;
}

.container h1 {
  font-family: 'VCR OSD Mono', Monospace, monospace, monospace;
  text-transform: uppercase;
  color: #FFF;
  font-smooth: never;
  -webkit-font-smoothing: none;
  line-height: 20%;
  text-shadow: 4px 0 0 rgba(0, 0, 0, 1), 0 -4px 0 rgba(0, 0, 0, 1), 0 4px 0 rgba(0, 0, 0, 1), -4px 0 0 rgba(0, 0, 0, 1);
  font-size: 24px; /* 21px */
  line-height: 120%;
}

#three-canvas {
  position: absolute;
  z-index: 100;
}

.sound-icon {
  position:absolute;
  bottom:24px;
  left:24px;
  width: 24px;
  height: 24px;
  z-index: 101;
  cursor: pointer;
  background-image: url(volume-off.png);
  background-size: 24px 24px;
  background-position: left center;
  visibility: hidden;
}

.page-title, .page-time {
  padding-left: 1em;
}

/* MEDIA QUERIES */

/* tablet landscape */
@media (min-width: 800px) {
  
  .container h1 {
    font-size: 36px;
  }

}