dobutterfliescry.net/www/typing.css

html, body {
  height: 100%;
  margin: 0;
  background-color: #0e0d14;
}

.centered {
  position: absolute;
  inset: 0 0 0 0;
  
  margin: auto;
  
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
}

.heading {
  font-family: monospace;
  font-size: 2em;
  font-weight: bold;
  color: #ac4aed;
}

/* =========================================================== *
 *                      Type Writer Effect                     *
/* =========================================================== */

.typing-wrapper {
  /* display: flex; */
  /* flex-direction: column; */
  /* text-align: center; */
  /* justify-items: flex-start; */
  /* align-items: center; */

  width: 39ch; /* length of typing-prompt + cursor */

  border: 3px solid #ac4aed;
  padding: 20px;
}

.typing-prompt {
  display: inline-block;
  text-align: start;
}

.typing-effect {
  width: 36ch;
  animation: typing 3s steps(36), cursor-blink 1s step-end 3s infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 1ch solid;
}

.typing-result {
  animation: unhide 1s 3.8s forwards;
  visibility: hidden;
}

@keyframes typing {
  from {
    width: 0
  }
}
    
@keyframes cursor-blink {
  50% {
    border-color: transparent
  }
}

@keyframes unhide {
  to {
    visibility: visible
  }
}