@import 'fonts.css';

/* ===== Common ===== */
.logo {
  font: bold 125px/130px Arial;
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  height: 130px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
  -webkit-transition: all 200ms linear;
  letter-spacing: -10px;
}

/* ===== Effects ===== */
.fullscreen {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ===== Animations ===== */
@-webkit-keyframes glow {
  0% {
    text-shadow: 0 0 10px #fff;
  }

  50% {
    text-shadow: 0 0 20px #fff;
  }

  100% {
    text-shadow: 0 0 10px #fff;
  }
}

@keyframes glow {
  0% {
    text-shadow: 0 0 10px #fff;
  }

  50% {
    text-shadow: 0 0 20px #fff;
  }

  100% {
    text-shadow: 0 0 10px #fff;
  }
}

.glow {
  -webkit-animation-name: glow;
  animation-name: glow;
}

.animated.glow {
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
}