.typing-text {
  display: inline-block;

  width: 0;
  white-space: nowrap;
  overflow: hidden;

  color: #444;

  position: absolute;
  left: 10%;
  height: 8vw;
  color: #827c75;
  font-size: 5vw;
}

.typing-text.first {
  bottom: 60%;

  animation:
    firstText 1s steps(7) forwards,
    caret 0.25s step-end infinite,
    hideCaret 0s forwards;

  animation-delay: 0s, 0s, 1s;
}

.typing-text.second {
  bottom: 40%;

  animation:
    secondText 2s steps(14) forwards,
    caret 0.25s step-end infinite,
    hideCaret 0s forwards;

  animation-delay: 1s, 1s, 3s;
}

@media screen and (min-width: 600px) {
  .typing-text {
    height: 10vw;
    font-size: 4vw;
  }
  .typing-text.first {
    bottom: 40%;
  }
  .typing-text.second {
    bottom: 20%;
  }
}

@keyframes firstText {
  from {
    width: 0;
  }
  to {
    width: 7em;
  }
}

@keyframes secondText {
  from {
    width: 0;
  }
  to {
    width: 14em;
  }
}

@keyframes caret {
  50% {
    border-right: 3px solid #444;
  }
}

@keyframes hideCaret {
  to {
    border-right: none;
  }
}