:root {
  --typewriterSpeed: 1.6s;
  --typewriterCharacters: 15;
}

.typed {
  font-size: clamp(1rem, 1rem + 2vw, 2rem);
  position: relative;
  font-family: "Source Code Pro", monospace;
  position: relative;
  width: max-content;
}

.typed::before,
.typed::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.typed::before {
  background: var(--bg-site);
  animation: typewriter var(--typewriterSpeed)
    steps(var(--typewriterCharacters)) 0.6s forwards;
}

@keyframes typewriter {
  to {
    left: 100%;
  }
}