body {
  height: 100%;
  width: 100%;
  background: #000000;
  color: #b30000;
  font-family: "Lucida Console", monospace;
}
.container {
  margin-top: 5%;
  width: 100%;
  height: 100%;
  padding: 70px;
}
.first_line,
.second_line {
  white-space: nowrap; /* keep text in one line */
  overflow: hidden; /* hide text behind the cursor */
  margin: 0.5rem auto;
  font-family: "Lucida Console", monospace;
  font-size: 2rem;
  font-weight: bold;
}
.other_line {
  white-space: nowrap; /* keep text in one line */
  overflow: hidden; /* hide text behind the cursor */
  margin: 0.5rem auto;
  font-family: "Lucida Console", monospace;
  font-size: 1.5rem;
  font-weight: bold;
}
.first_line {
  border-right: 2px solid rgba(17, 17, 17, 0.9);
  /* define animation types for text + cursor */
  animation: typewriter_1 3s steps(25) 1s 1 normal both,
    first_cursor 900ms steps(33) 8;
}
.second_line {
  border-right: 2px solid rgba(17, 17, 17, 0.9);
  /* define animation types for text + cursor */
  animation: typewriter_2 5s steps(31) 1s 1 normal both,
    second_cursor 900ms steps(31) infinite;
  -webkit-animation-delay: 7s;
  animation-delay: 7s;
}
@keyframes typewriter_1 {
  from {
    width: 0;
  }
  to {
    width: 34rem;
  }
}
@keyframes typewriter_2 {
  from {
    width: 0;
  }
  to {
    width: 40rem;
  }
}
@keyframes first_cursor {
  from {
    border-right-color: rgba(17, 17, 17, 0.9);
  }
  to {
    border-right-color: rgba(255, 255, 255, 0.8);
  }
}
@keyframes second_cursor{
  from {
    border-right-color: rgba(17, 17, 17, 0.9);
  }
  to {
    border-right-color: rgba(255, 255, 255, 0.8);
  }
}