<div class="container">
  <p class="chars">Hello, world! This is a demonstration of a typewriter effect using pure CSS.</p>
</div>

@import url("https://api.fonts.coollabs.io/css2?family=Press+Start+2P&display=swap");

* {
  box-sizing: border-box;
}

html {
  background-color: #04650d;
}

.container {
  display: inline-block;
  padding-inline: 2rem;
}

.chars {
  font-size: 1rem;
  letter-spacing: 0.2rem;
  font-family: "Press Start 2P", system-ui;
  color: #1ff633;
  border-right: 6px solid #1ff633;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;

  /* steps needs to equal the exact amount of characters in the paragraph. See https://wordcounter.net/character-count for easy counting. */

  animation: typing 12s steps(76), cursor 0.4s step-end infinite alternate;
}

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

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