/* typewriter.css */
@font-face {
  font-family: "Neo Sans Std Regular";
  src: url("fonts/neo-sans-std/Neo Sans Std Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Neo Sans Std Bold Italic";
  src: url("fonts/neo-sans-std/Neo Sans Std Bold Italic.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Neo Sans Std Bold";
  src: url("fonts/neo-sans-std/Neo Sans Std Bold.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}


.typewriter {
  margin-left: 17vw; 
  font-family: "Neo Sans Std Bold", sans-serif;
  font-size: 1.5em;
  overflow: hidden;              /* hide overflowing text */
  white-space: nowrap;           /* keep text on one line */
  border-right: none;   /* the blinking cursor */
  letter-spacing: 0em;          /* adjust to taste */
  animation:
    typing 2s steps(50, end),
    blink-caret 0.9s step-end infinite; /* cursor blink */
}

@media (max-width: 600px) { /*For phone views*/
  .typewriter {
    margin-left: 0; 
    font-size: 1.2em; 
  }
}

.typewriter-logo {
  width: 1.2em; /* match font-size if desired */
  height: auto;
  margin-left: 0.3em; /* space between text and image */
  vertical-align: bottom;
  opacity: 0;
  animation:
    appear 3 steps(4, end) forwards,
    blink-image 1s step-end infinite;
}

/* reveal text */
@keyframes typing {
  from { width: 0; }
  to   { width: 40ch; }
}

/* blink cursor */
@keyframes blink-caret {
  from, to { border-color: transparent; }
  50%      { border-color: currentColor; }
}

/* reveal image after text */
@keyframes appear {
  from { opacity: 0; }
  to   { opacity: 1; }
}