:root {
  --type-color: #a5bf94;
  --bg-color: #20471b;
  --typewriterSpeed: 4.2s;
  --typewriterChar: 36;
}

.wrapper__typewriter {
  margin: .5em;
  padding: 1em;

  display: flex;

  justify-content: center;
}

.wrapper__typewriter__inner {
  padding: 1em;

  display: flex;
  flex-direction: column;

  flex-shrink: 5;
}

.typewriter__heading {
  font-size: 2rem;
  position: relative;
  font-family: "Source Code Pro", monospace;
  color: var(--type-color);
  position: relative;
  width: max-content;
}

@media (max-width: 780px) {
  .typewriter__heading {
    font-size: 1rem;
  }

  .subtitle {
    font-size: .8rem !important; 
    font-weight: 400;
  }
}

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

.typewriter__heading::before {
  background: var(--bg-color);
  animation: typewriter var(--typewriterSpeed) steps(var(--typewriterChar)) 1s
    forwards;
}

.typewriter__heading::after {
  width: 0.125em;
  background: var(--type-color);
  animation: typewriter var(--typewriterSpeed) steps(var(--typewriterChar)) 1s
      forwards,
    blink 750ms steps(var(--typewriterChar)) infinite;
}

.subtitle {
  text-align: center;
  color: var(--clr-palette-2);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(3rem);
  animation: fadeInUp 2s ease calc(var(--typewriterSpeed) + 2s) forwards;
}

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

@keyframes blink {
  to {
    background: transparent;
  }
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}