@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}

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

.typewriter {
  overflow: hidden;
  white-space: nowrap;
  margin: 0 auto;
  width: 0;
}

.typewriter-1 {
  animation:
    typewriter 2s steps(40, end) 0s,
    blink 0.75s step-end infinite;
  animation-fill-mode: forwards;
}

.typewriter-2 {
  animation:
    typewriter 2.5s steps(40, end) 2s,
    blink 0.75s step-end infinite 2s;
  animation-fill-mode: forwards;
}

.typewriter-3 {
  animation:
    typewriter 2.8s steps(40, end) 4.5s,
    blink 0.75s step-end infinite 4.5s;
  animation-fill-mode: forwards;
}

.typewriter-4 {
  animation:
    typewriter 3s steps(40, end) 7.3s,
    blink 0.75s step-end infinite 7.3s;
  animation-fill-mode: forwards;
}

.typewriter-5 {
  animation:
    typewriter 3.5s steps(40, end) 10.3s,
    blink 0.75s step-end infinite 10.3s;
  animation-fill-mode: forwards;
}

.typewriter-6 {
  animation:
    typewriter 4s steps(40, end) 13.8s,
    blink 0.75s step-end infinite 13.8s;
  animation-fill-mode: forwards;
  white-space: normal;
  word-wrap: break-word;
  max-width: 100%;
}

.DialogueBox .typewriter {
  white-space: normal;
  word-wrap: break-word;
  border-right: 2px solid #00ff00;
  display: inline-block;
  max-width: 100%;
}