body {
  text-align: center;
  background-color: #1d1f20;
}

.wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  font-size: 0;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
}

p {
  font-family: sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: #eee;
  opacity: 0.3;
}

.letter {
  width: 24px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  overflow: hidden;
  margin: 0 0;
  font-family: sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 24px;
  text-transform: uppercase;
  color: #eee;
}
.letter:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  word-break: break-all;
  background-color: #1d1f20;
}

.letter:nth-child(1):before {
  content: "7930542186";
  margin-top: -48px;
  -webkit-animation-name: letter1;
          animation-name: letter1;
  -webkit-animation-duration: 1.52s;
          animation-duration: 1.52s;
  -webkit-animation-delay: 0.43s;
          animation-delay: 0.43s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter1 {
  from {
    margin-top: -48px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter1 {
  from {
    margin-top: -48px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(2):before {
  content: "8614250973";
  margin-top: -144px;
  -webkit-animation-name: letter2;
          animation-name: letter2;
  -webkit-animation-duration: 0.9257142857s;
          animation-duration: 0.9257142857s;
  -webkit-animation-delay: 0.73s;
          animation-delay: 0.73s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter2 {
  from {
    margin-top: -144px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter2 {
  from {
    margin-top: -144px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(3):before {
  content: "7981304625";
  margin-top: -48px;
  -webkit-animation-name: letter3;
          animation-name: letter3;
  -webkit-animation-duration: 0.08s;
          animation-duration: 0.08s;
  -webkit-animation-delay: 0.97s;
          animation-delay: 0.97s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter3 {
  from {
    margin-top: -48px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter3 {
  from {
    margin-top: -48px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(4):before {
  content: "3106875249";
  margin-top: 0px;
  -webkit-animation-name: letter4;
          animation-name: letter4;
  -webkit-animation-duration: 0s;
          animation-duration: 0s;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter4 {
  from {
    margin-top: 0px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter4 {
  from {
    margin-top: 0px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(5):before {
  content: "7082531649";
  margin-top: -168px;
  -webkit-animation-name: letter5;
          animation-name: letter5;
  -webkit-animation-duration: 1.575s;
          animation-duration: 1.575s;
  -webkit-animation-delay: 0.55s;
          animation-delay: 0.55s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter5 {
  from {
    margin-top: -168px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter5 {
  from {
    margin-top: -168px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(6):before {
  content: "9543671280";
  margin-top: -144px;
  -webkit-animation-name: letter6;
          animation-name: letter6;
  -webkit-animation-duration: 0.5142857143s;
          animation-duration: 0.5142857143s;
  -webkit-animation-delay: 0.85s;
          animation-delay: 0.85s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter6 {
  from {
    margin-top: -144px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter6 {
  from {
    margin-top: -144px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(7):before {
  content: "6540812739";
  margin-top: -72px;
  -webkit-animation-name: letter7;
          animation-name: letter7;
  -webkit-animation-duration: 1.71s;
          animation-duration: 1.71s;
  -webkit-animation-delay: 0.43s;
          animation-delay: 0.43s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter7 {
  from {
    margin-top: -72px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter7 {
  from {
    margin-top: -72px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(8):before {
  content: "6274305918";
  margin-top: -168px;
  -webkit-animation-name: letter8;
          animation-name: letter8;
  -webkit-animation-duration: 2.555s;
          animation-duration: 2.555s;
  -webkit-animation-delay: 0.27s;
          animation-delay: 0.27s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter8 {
  from {
    margin-top: -168px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter8 {
  from {
    margin-top: -168px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(9):before {
  content: "8162493075";
  margin-top: -96px;
  -webkit-animation-name: letter9;
          animation-name: letter9;
  -webkit-animation-duration: 0.992s;
          animation-duration: 0.992s;
  -webkit-animation-delay: 0.69s;
          animation-delay: 0.69s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter9 {
  from {
    margin-top: -96px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter9 {
  from {
    margin-top: -96px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(10):before {
  content: "6294753081";
  margin-top: -192px;
  -webkit-animation-name: letter10;
          animation-name: letter10;
  -webkit-animation-duration: 0.7822222222s;
          animation-duration: 0.7822222222s;
  -webkit-animation-delay: 0.78s;
          animation-delay: 0.78s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter10 {
  from {
    margin-top: -192px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter10 {
  from {
    margin-top: -192px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(11):before {
  content: "4672319085";
  margin-top: -48px;
  -webkit-animation-name: letter11;
          animation-name: letter11;
  -webkit-animation-duration: 2.4s;
          animation-duration: 2.4s;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter11 {
  from {
    margin-top: -48px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter11 {
  from {
    margin-top: -48px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(12):before {
  content: "4217530986";
  margin-top: -72px;
  -webkit-animation-name: letter12;
          animation-name: letter12;
  -webkit-animation-duration: 1.14s;
          animation-duration: 1.14s;
  -webkit-animation-delay: 0.62s;
          animation-delay: 0.62s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter12 {
  from {
    margin-top: -72px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter12 {
  from {
    margin-top: -72px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(13):before {
  content: "1630527948";
  margin-top: -120px;
  -webkit-animation-name: letter13;
          animation-name: letter13;
  -webkit-animation-duration: 1.7666666667s;
          animation-duration: 1.7666666667s;
  -webkit-animation-delay: 0.47s;
          animation-delay: 0.47s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter13 {
  from {
    margin-top: -120px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter13 {
  from {
    margin-top: -120px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(14):before {
  content: "1723495068";
  margin-top: -24px;
  -webkit-animation-name: letter14;
          animation-name: letter14;
  -webkit-animation-duration: 0.7s;
          animation-duration: 0.7s;
  -webkit-animation-delay: 0.65s;
          animation-delay: 0.65s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter14 {
  from {
    margin-top: -24px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter14 {
  from {
    margin-top: -24px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(15):before {
  content: "2578143960";
  margin-top: -24px;
  -webkit-animation-name: letter15;
          animation-name: letter15;
  -webkit-animation-duration: 1.04s;
          animation-duration: 1.04s;
  -webkit-animation-delay: 0.48s;
          animation-delay: 0.48s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter15 {
  from {
    margin-top: -24px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter15 {
  from {
    margin-top: -24px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(16):before {
  content: "4107358629";
  margin-top: -96px;
  -webkit-animation-name: letter16;
          animation-name: letter16;
  -webkit-animation-duration: 0.704s;
          animation-duration: 0.704s;
  -webkit-animation-delay: 0.78s;
          animation-delay: 0.78s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter16 {
  from {
    margin-top: -96px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter16 {
  from {
    margin-top: -96px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(17):before {
  content: "2578143960";
  margin-top: -96px;
  -webkit-animation-name: letter17;
          animation-name: letter17;
  -webkit-animation-duration: 0.704s;
          animation-duration: 0.704s;
  -webkit-animation-delay: 0.78s;
          animation-delay: 0.78s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter17 {
  from {
    margin-top: -96px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter17 {
  from {
    margin-top: -96px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(18):before {
  content: "4107358629";
  margin-top: -96px;
  -webkit-animation-name: letter18;
          animation-name: letter18;
  -webkit-animation-duration: 0.704s;
          animation-duration: 0.704s;
  -webkit-animation-delay: 0.78s;
          animation-delay: 0.78s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter18 {
  from {
    margin-top: -96px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter18 {
  from {
    margin-top: -96px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(19):before {
  content: "1630527948";
  margin-top: -96px;
  -webkit-animation-name: letter19;
          animation-name: letter19;
  -webkit-animation-duration: 0.9257142857s;
          animation-duration: 0.9257142857s;
  -webkit-animation-delay: 0.65s;
          animation-delay: 0.65s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter19 {
  from {
    margin-top: -96px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter19 {
  from {
    margin-top: -96px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(20):before {
  content: "6294753081";
  margin-top: -96px;
  -webkit-animation-name: letter20;
          animation-name: letter20;
  -webkit-animation-duration: 0.704s;
          animation-duration: 0.704s;
  -webkit-animation-delay: 0.78s;
          animation-delay: 0.78s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter20 {
  from {
    margin-top: -96px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter20 {
  from {
    margin-top: -96px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(21):before {
  content: "3106875249";
  margin-top: -96px;
  -webkit-animation-name: letter21;
          animation-name: letter21;
  -webkit-animation-duration: 0.9257142857s;
          animation-duration: 0.9257142857s;
  -webkit-animation-delay: 0.65s;
          animation-delay: 0.65s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter21 {
  from {
    margin-top: -96px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter21 {
  from {
    margin-top: -96px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(22):before {
  content: "8614250973";
  margin-top: -96px;
  -webkit-animation-name: letter22;
          animation-name: letter22;
  -webkit-animation-duration: 0.9257142857s;
          animation-duration: 0.9257142857s;
  -webkit-animation-delay: 0.65s;
          animation-delay: 0.65s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

@-webkit-keyframes letter22 {
  from {
    margin-top: -96px;
  }
  to {
    margin-top: 24px;
  }
}

@keyframes letter22 {
  from {
    margin-top: -96px;
  }
  to {
    margin-top: 24px;
  }
}