/* --text: #54ff00;
   --background: #000000;
   --primary: #39af00;
   --secondary: #ffffff;
   --accent: #a9a9a9;
*/

body {
  background-color: #000000;
  color: #54ff00;
  font-family: monospace;
}

.container {
  display: inline-block;
}

.text {
  font-size: 2em;
  letter-spacing: 5px;
  border-right: 5px solid;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  width: 0ch;
  animation: typing1 2s steps(21) forwards, cursor 0.5s step-end infinite alternate;
  animation-fill-mode: forwards;
  position: relative;
}

/* Typing the second part */
.text::after {
  content: " Go back.";
  position: absolute;
  left: 100%;
  top: 0;
  white-space: nowrap;
  overflow: hidden;
  border-right: 5px solid;
  width: 0ch;
  animation: typing2 1.5s steps(8) 2.2s forwards;
}

@keyframes typing1 {
  from { width: 0ch }
  to { width: 21ch } /* "Nothing to see here." */
}

@keyframes typing2 {
  from { width: 0ch }
  to { width: 8ch } /* " Go back." */
}

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