html, body { 
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  user-select: none;
}
#intro {
  text-align: center;
  font-family: 'segment';
  color: #fff;
}
#intro span {
  display: inline-block;
  /*animation in js to control duration*/
}
#container, #container div{
  position: absolute;
}
#ui, .button, .power{
  width: 100%;
  margin: 0;
  text-align: center;
}
#ui{
  font-family: 'segment';
  color: #fff;
}
.power{
  font-family: 'pixel';
  color: #111;
  animation: rotateLoop 0.5s infinite linear;
}
.alertify input {
  font-family: 'segment';
}
/*///////////ANIMATIONS////////////*/

@keyframes intro {
  0% { 
    text-shadow: 0 0 55px white, 0 0 99px white; 
    transform: scaleX(0);
  }
  50%, 80% { 
    text-shadow: 0 0 0 white, 0 0 0 white; 
    transform: scaleX(1);
  }
  100% { 
    text-shadow: 0 0 99px white, 0 0 999px white; 
    transform: scaleX(1);
  }
}

@keyframes rotateLoop {
  from { transform: perspective(50px) rotateY(0); }
  to   { transform: perspective(50px) rotateY(180deg); }
}