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

.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: rgb(36, 77, 110);
}
.letter:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  word-break: break-all;
  background-color: #1d1f20;
}

.letter:nth-child(1):before {
  content: "8532109476";
  margin-top: -168px;
  -webkit-animation-name: letter1;
  animation-name: letter1;
  -webkit-animation-duration: 2.135s;
  animation-duration: 2.135s;
  -webkit-animation-delay: 0.39s;
  animation-delay: 0.39s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

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

@keyframes letter1 {
  from {
    margin-top: -168px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(2):before {
  content: "7145396820";
  margin-top: -192px;
  -webkit-animation-name: letter2;
  animation-name: letter2;
  -webkit-animation-duration: 0.32s;
  animation-duration: 0.32s;
  -webkit-animation-delay: 0.91s;
  animation-delay: 0.91s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

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

@keyframes letter2 {
  from {
    margin-top: -192px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(3):before {
  content: "4765813092";
  margin-top: 0px;
  -webkit-animation-name: letter3;
  animation-name: letter3;
  -webkit-animation-duration: 0s;
  animation-duration: 0s;
  -webkit-animation-delay: 0.22s;
  animation-delay: 0.22s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

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

@keyframes letter3 {
  from {
    margin-top: 0px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(4):before {
  content: "1498052376";
  margin-top: 0px;
  -webkit-animation-name: letter4;
  animation-name: letter4;
  -webkit-animation-duration: 0s;
  animation-duration: 0s;
  -webkit-animation-delay: 0.38s;
  animation-delay: 0.38s;
  -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: "3915684720";
  margin-top: -168px;
  -webkit-animation-name: letter5;
  animation-name: letter5;
  -webkit-animation-duration: 2.87s;
  animation-duration: 2.87s;
  -webkit-animation-delay: 0.18s;
  animation-delay: 0.18s;
  -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: "4130692587";
  margin-top: 0px;
  -webkit-animation-name: letter6;
  animation-name: letter6;
  -webkit-animation-duration: 0s;
  animation-duration: 0s;
  -webkit-animation-delay: 0.05s;
  animation-delay: 0.05s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

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

@keyframes letter6 {
  from {
    margin-top: 0px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(7):before {
  content: "0468132795";
  margin-top: -72px;
  -webkit-animation-name: letter7;
  animation-name: letter7;
  -webkit-animation-duration: 1.68s;
  animation-duration: 1.68s;
  -webkit-animation-delay: 0.44s;
  animation-delay: 0.44s;
  -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: "6539720814";
  margin-top: -96px;
  -webkit-animation-name: letter8;
  animation-name: letter8;
  -webkit-animation-duration: 0.672s;
  animation-duration: 0.672s;
  -webkit-animation-delay: 0.79s;
  animation-delay: 0.79s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

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

@keyframes letter8 {
  from {
    margin-top: -96px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(9):before {
  content: "3942750168";
  margin-top: -96px;
  -webkit-animation-name: letter9;
  animation-name: letter9;
  -webkit-animation-duration: 1.056s;
  animation-duration: 1.056s;
  -webkit-animation-delay: 0.67s;
  animation-delay: 0.67s;
  -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: "4628095731";
  margin-top: -24px;
  -webkit-animation-name: letter10;
  animation-name: letter10;
  -webkit-animation-duration: 0.28s;
  animation-duration: 0.28s;
  -webkit-animation-delay: 0.86s;
  animation-delay: 0.86s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

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

@keyframes letter10 {
  from {
    margin-top: -24px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(11):before {
  content: "5172863490";
  margin-top: -96px;
  -webkit-animation-name: letter11;
  animation-name: letter11;
  -webkit-animation-duration: 1.312s;
  animation-duration: 1.312s;
  -webkit-animation-delay: 0.59s;
  animation-delay: 0.59s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

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

@keyframes letter11 {
  from {
    margin-top: -96px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(12):before {
  content: "5647901382";
  margin-top: -120px;
  -webkit-animation-name: letter12;
  animation-name: letter12;
  -webkit-animation-duration: 2.0666666667s;
  animation-duration: 2.0666666667s;
  -webkit-animation-delay: 0.38s;
  animation-delay: 0.38s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

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

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

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

@keyframes letter13 {
  from {
    margin-top: 0px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(14):before {
  content: "9874013265";
  margin-top: -144px;
  -webkit-animation-name: letter14;
  animation-name: letter14;
  -webkit-animation-duration: 1.8171428571s;
  animation-duration: 1.8171428571s;
  -webkit-animation-delay: 0.47s;
  animation-delay: 0.47s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

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

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

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

@keyframes letter15 {
  from {
    margin-top: -72px;
  }
  to {
    margin-top: 24px;
  }
}
.letter:nth-child(16):before {
  content: "7532089416";
  margin-top: -144px;
  -webkit-animation-name: letter16;
  animation-name: letter16;
  -webkit-animation-duration: 0.4114285714s;
  animation-duration: 0.4114285714s;
  -webkit-animation-delay: 0.88s;
  animation-delay: 0.88s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

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

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