/* typing animation, make sure you set the --len variable */
.typing {
  width: calc(var(--len) * 1ch);
  --speed: 2s;

  animation: type var(--speed) steps(var(--len)), blink 1s linear var(--speed) infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid;
}

@keyframes type {
  from {
    width: 0;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}