body {
  font-family: 'Merriweather Sans', sans-serif;
  background-color: #414141;
  color: #fff;
}
.wrapper {
  width: 320px;
  margin: 5em auto;
  text-align: center;
}
.crazy-alert {
  font-size: 22px;
}
.bigger {
  display: block;
  margin-bottom: 0.25em;
  font-size: 2.5em;
  letter-spacing: 0.2em;
  color: #ebb221;
  text-shadow: 1px 1px 0 #f35747, 2px 2px 0 rgba(243, 87, 71, 0.9), 3px 3px 0 rgba(243, 87, 71, 0.8), 4px 4px 0 rgba(243, 87, 71, 0.7), 5px 5px 0 rgba(243, 87, 71, 0.6), 6px 6px 0 rgba(243, 87, 71, 0.5), 7px 7px 0 rgba(243, 87, 71, 0.4), 8px 8px 0 rgba(243, 87, 71, 0.3), 9px 9px 0 rgba(243, 87, 71, 0.2), 10px 10px 0 rgba(243, 87, 71, 0.1);
  animation: jumptext 1s steps(8, start) infinite;
  transition: all 0.2s ease;
}
.bigger:hover {
  animation: none;
  letter-spacing: normal;
}
.regular {
  display: block;
}
.regular + .regular {
  animation-delay: 0.5s;
}
.buzz {
  display: inline-block;
  text-shadow: 2px 0 0 rgba(255, 255, 255, 0.3), -2px 0 0 rgba(255, 255, 255, 0.3);
  animation: buzz 0.04s linear infinite alternate;
  transition: all 0.2s ease;
}
.buzz:hover {
  -webkit-animation: none;
  text-shadow: none;
}
@keyframes jumptext {
  0% {
    transform: rotate(-5deg);
    letter-spacing: normal;
  }
  50% {
    transform: rotate(5deg);
    color: #90f0d2;
    letter-spacing: 0.1em;
    text-shadow: 1px 1px 0 #3988a6, 2px 2px 0 rgba(57, 136, 166, 0.8), 3px 3px 0 rgba(57, 136, 166, 0.6), 4px 4px 0 rgba(57, 136, 166, 0.4), 5px 5px 0 rgba(57, 136, 166, 0.2);
  }
  100% {
    transform: rotate(-5deg);
    color: #ebb221;
    letter-spacing: normal;
  }
}
@keyframes text-flasher {
  50% {
    text-shadow: 0 0 2px #000, 0 0 70px rgba(255, 255, 255, 0.5);
  }
  60% {
    text-shadow: 0 0 2px #000, 0 0 10px rgba(255, 255, 255, 0.5);
  }
  100% {
    text-shadow: 0 0 2px #000, 0 0 70px rgba(255, 255, 255, 0.5);
  }
}
@keyframes buzz {
  0% {
    transform: translateX(-1px);
  }
  100% {
    transform: translateX(1px);
  }
}