body {
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column;
}

.loader {
  --ANIMATION-DELAY-MULTIPLIER: 70ms;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.loader span {
  padding: 0;
  margin: 0;
  letter-spacing: -5rem;
  animation-delay: 0s;
  transform: translateY(4rem);
  animation: hideAndSeek 1s alternate infinite cubic-bezier(0.86, 0, 0.07, 1);
}
.loader .l {
  animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 0);
}
.loader .o {
  animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 1);
}
.loader .a {
  animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 2);
}
.loader .d {
  animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 3);
}
.loader .ispan {
  animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 4);
}
.loader .n {
  animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 5);
}
.loader .g {
  animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 6);
}
.letter {
  width: fit-content;
  height: 8rem;
}
.i {
  margin-inline: 5px;
}
@keyframes hideAndSeek {
  0% {
    transform: translateY(4rem);
  }
  100% {
    transform: translateY(0rem);
  }
}

@media (max-width: 768px) {
    .letter {
      height: 4rem;
    }
}
@media (max-width: 340px) {
    .letter {
      height: 3rem;
    }
}