:root {
  --steps: 16; // Char count
  --background: #1d1f20;
}
body {
  display: grid;
  place-content: center;
  min-height: 100vh;
  background: var(--background);
}
.typing {
  // Text style
  font-family: 'Inconsolata', Consolas, monospace;
	font-size: 6vw;
	color: #d7b94c;
  // Core styles
  position: relative;
	&::after {
    content: "|";
    position: absolute;
    right: 0;
    width: 100%;
    color: white;
    background: var(--background);
    animation: typing 4s steps(var(--steps)) forwards,
      caret 1s infinite;
  }
}
// Animation
@keyframes typing {
	to { width: 0 }
}
@keyframes caret {
	50% { color: transparent }
}

/*
Pure CSS Typing animation with ::after pseudo-element so width don't needed to be calculated, enjoy it!
*/