@font-face {
  font-family: vcr;
  src: url(/fonts/vcr.ttf);
}

body { 
  overflow: hidden;
  margin: 0;
  font-family: 'vcr';
}
canvas { display: block; }

div#player-name {
  position: absolute;
  top: 40vh;
  left: 50vw;
  text-align: center;
  font-size: 36px;
  color: #fff;
}

input#name-entry {
  /*display: none;*/
  position: absolute;
  z-index: -1000;
}

.hidden {
  display: none;
}

div#timer.invis {
  color: #f00;
  opacity: 0.1;
}

div#timer {
  color: #fff;
  transition: opacity 0.8s;
  opacity: 1;
}

div#pause {
  color: #00FF00;
  font-size: 36px;
  top: 80vh;
  left: 50vw;
  position: absolute;
}

div#pause.active {
  color: #a0a;
}

div.info-bar {
  font-size: 36px; 
  height: 1.2vh;
  color: #fff;
  position: absolute;
  width: 100%;
  text-align: center;
  z-index: 100;
  display:block;
}

div#fog-logo2 {
  opacity: 0.4;
  transform-style: preserve-3d;
  position: absolute;
  top: 10vh;
  left: 30vw;
  background-position: center;
  background-size: contain; 
  width: 40vw;
  height: 40vw;
  background-image: url('/sprites/foglogo2.png');

  -webkit-animation: spin 8s linear infinite;
  -moz-animation: spin 8s linear infinite;
  animation: spin 8s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    opacity: 0.2;
    transform: rotateY(0deg);
  }
  20% {
    transform: rotateY(540deg);
    opacity: 0.8;
  }

  60% {
    transform: rotateY(-180deg);
    opacity: 0.3;
  }

  70% {
    transform: rotateY(180deg);
    opacity: 0.6;
  }

  80% {
    transform: rotateY(0deg);
    opacity: 0.8;
  }
  
  89% {
    transform: rotateY(4deg);
    opacity: 0.8;
  }

  95% {
   transform: rotateY(0deg);
    opacity: 1; 
  }

  100% {
    opacity: 0.2;
  }
}

div#fog-logo {
  opacity: 0.4;
  transform-style: preserve-3d;
  position: absolute;
  top: 0vh;
  left: 0vw;
  background-position: center;
  background-size: contain; 
  background-repeat: no-repeat;
  width: 100vw;
  height: 100vh;
  background-image: url('/sprites/shapeaterorb.png');

  -webkit-animation: bob 8s linear infinite;
  -moz-animation: bob 8s linear infinite;
  animation: bob 8s linear infinite;
}

@-webkit-keyframes bob {
  0% {
    /*opacity: 0.2;*/
    transform: scale(3);
    opacity: 0;
    top: 0vh;
  }
  20% {
    transform: scale(1);
  }


  100% {
    transform: scale(1.3);
    opacity: 1;
  }
}


div#scores {
  font-size: 36px;
  color: #fff;
  position: absolute;
  top: -100vh;
  left: 40vw;
}

div#scores.score-scroll {
  transition: top 8s;
  top: 30vh;
}

div.score {
  color: #fff;
  margin-bottom: 1.6vh;
  transition: color 3s;
}

div.score:hover {
  transition: color 3s;
  color: #ff0;
}

div.score-nl {
  font-size: 18px;
}

div#score {
  /*something*/
  color: #fff;
  /*transition: text-shadow 0.1s;*/
  transition: color 0.6s;
}

div#score::after {
  box-shadow: 0 5px 15px rgba(255,255,255,0.3);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

/*div#score::after  {
  opacity: 0;
  transition: opacity 0.1s;
}
*/
div#score.light {
 /* text-shadow: 2px 2px 5px #ff0000;
  transition: text-shadow 0.1s;*/
  transition: color 0.6s;
  color: #f00;
}

div#score.light::after {
  box-shadow: 0 5px 15px rgba(255,255,255,0.3);
  opacity: 1;
}

div#info {
  top: 1.2vh;
}

div#info2 {
  top: 2.4vh;
}

div#info3 {
  top: 3.6vh;
}

div#player-info {
  bottom: 3.6vh;
}

div.bar-ele {
  min-height: 1px;
  display: inline;
  margin: 0;
  padding: 0;
  max-width: 10vw;

}

div.bar-icon {
  font-size: 18px;
  display: inline-block;
  position: relative;
  width: 32px;
  height: 32px;
  margin-left: 6px;
  margin-right: 6px;
  /*background-color: #f8f;*/
}

#friend-info {
  left: 0;
}

div.friend-name {
  position: absolute;
  top: 2px;
  left: 40%;
}

div.friend-meter {
  position: absolute;
  width: 100%;
  bottom: 0;
}


div.friend-meter progress, div.friend-health progress {
  width: 100%;
}

progress.friend-health::-moz-progress-bar { background: #0d4; }

div.bar-ele-wide {
  display: inline;
  width: 80vw;
  max-width: 80vw;
}

#power {
  width: 80vw;
  border: 0px;
  background-color: #222;
  color: #ff2;
  height: 1.2vh;
  top: -5px;
  position: relative;
}
progress#power::-moz-progress-bar { background: #ff2; }
progress#power::-webkit-progress-value { background: #ff2; }

#health {
  width: 80vw;
  border: 0px;
  background-color: #222;
  color: #2ff;
  height: 1.2vh;
  top: -5px;
  position: relative;
}

progress#health::-moz-progress-bar { background: #0d4; }
progress#health::-webkit-progress-value { background: #0ff; }

#knowledge {
  width: 80vw;
  border: 0px;
  background-color: #222;
  color: #2ff;
  height: 1.2vh;
  top: -5px;
  position: relative;
}

progress#knowledge::-moz-progress-bar { background: #5A1196; }
progress#knowledge::-webkit-progress-value { background: #5A1196; }

#stage-info.announcement {
  text-align: center;

  opacity: 0.6;
  transition: opacity 0.4s ease-out;
}


#stage-info.static {
  opacity: 0.2;
  transition: opacity 0.6s ease-out;
}

#stage-info {
  opacity: 0;
  transition: opacity 0.6s ease-out;
  /*font-family: courier;*/
  font-size: 72px;
  color: #fff;
  position: absolute;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
  
  text-align: center;
  vertical-align: middle;
}