@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@900&display=swap');

body {
  font-size: 30px;
}

.text-wrapper {
  display: inline-block;
  line-height: 124%;
  height: 1.2em !important;
  overflow: hidden;

}

.text-wrapper .letter {
  display: inline-block;
  transition: transform 1s cubic-bezier(0.76, 0, 0.24, 1);
}

.text-wrapper.play0 .letter {
  transform: translateY(0%);
  transition: transform 0s;
}

.text-wrapper.play1 .letter {
  transform: translateY(-100%);
}

.text-wrapper.play2 .letter {
  transform: translateY(-200%);
  transition: transform 0s;
}

.text-wrapper.play3 .letter {
  transform: translateY(-300%);
}

.text-wrapper.play4 .letter {
  transform: translateY(-400%);
  transition: transform 0s;
}

.text-wrapper.play5 .letter {
  transform: translateY(-500%);
}

.text-wrapper.play6 .letter {
  transform: translateY(-600%);
  transition: transform 0s;
}

.text-wrapper.play7 .letter {
  transform: translateY(-700%);
}

.text-wrapper.play8 .letter {
  transform: translateY(-800%);
  transition: transform 0s;
}

.text-wrapper.play9 .letter {
  transform: translateY(-900%);
}

.text-wrapper.play10 .letter {
  transform: translateY(-1000%);
  transition: transform 0s;
}

.text-wrapper.play11 .letter {
  transform: translateY(-1100%);
}

.text-wrapper.play12 .letter {
  transform: translateY(-1200%);
  transition: transform 0s;
}

.text-wrapper.play13 .letter {
  transform: translateY(-1300%);
}

.text-wrapper.play14 .letter {
  transform: translateY(-1400%);
  transition: transform 0s;
}

.text-wrapper.play15 .letter {
  transform: translateY(-1500%);
}

.text-wrapper.play16 .letter {
  transform: translateY(-1600%);
  transition: transform 0s;
}

.text-wrapper.play17 .letter {
  transform: translateY(-1700%);
}

.text-wrapper.play18 .letter {
  transform: translateY(-1800%);
  transition: transform 0s;
}

.text-wrapper.play19 .letter {
  transform: translateY(-1900%);
}

.letter:nth-child(1) {
  transition-delay: 0s;
}

.letter:nth-child(2) {
  transition-delay: 0.05s;
}

.letter:nth-child(3) {
  transition-delay: 0.1s;
}

.letter:nth-child(4) {
  transition-delay: 0.15s;
}

.letter:nth-child(5) {
  transition-delay: 0.2s;
}

.letter:nth-child(6) {
  transition-delay: 0.25s;
}

.letter:nth-child(7) {
  transition-delay: 0.3s;
}

.letter:nth-child(8) {
  transition-delay: 0.35s;
}

.letter:nth-child(9) {
  transition-delay: 0.4s;
}

.letter:nth-child(10) {
  transition-delay: 0.45s;
}

.letter:nth-child(11) {
  transition-delay: 0.5s;
}

.letter:nth-child(12) {
  transition-delay: 0.55s;
}

.letter:nth-child(13) {
  transition-delay: 0.6s;
}

.letter:nth-child(14) {
  transition-delay: 0.65s;
}

.letter:nth-child(15) {
  transition-delay: 0.7s;
}

.letter:nth-child(16) {
  transition-delay: 0.75s;
}

.letter:nth-child(17) {
  transition-delay: 0.8s;
}

.letter:nth-child(18) {
  transition-delay: 0.85s;
}

.letter:nth-child(19) {
  transition-delay: 0.9s;
}

.letter:nth-child(20) {
  transition-delay: 0.95s;
}

.letter:nth-child(21) {
  transition-delay: 1s;
}