:root {
  --text-color: solid orange;
}

/* =========================================================== *
 *                      Type Writer Effect                     *
 * Ref: https://css-tricks.com/snippets/css/typewriter-effect/ *
/* =========================================================== */

.typewriter {
  overflow: hidden;                 /* Crop everything that hasn't been "typed" yet */
  border-right: .15em solid orange; /* Cursor                                       */
  white-space: nowrap;              /* Keeps the content on a single line           */
  margin: 0 auto;                   /* Scrolling effect while "typing"              */
  letter-spacing: .15em;            /* Adjustable                                   */
  animation: 
    typewriter-typing 3.5s steps(40, end),
    typewriter-cursor-blink .75s step-end infinite;
}

/* .typewriter typing effect */
@keyframes typerwriter-typing {
  from { width: 0 }
  to { width: 100% }
}

/* .typewriter cursor blink effect */
@keyframes typerwriter-cursor-blink {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}