.fade-in-first {
    animation: fadeInAnimation ease 5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.fade-in-second {
    animation: fadeInAnimation ease 7s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

.typewriter p {
  color: gray;
  font-family: monospace;
  font-size: 16px;
  overflow: hidden;
  border-right: 1em solid rgba(0, 255, 0, 0.2);
  white-space: nowrap;
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation:
    typing 2s steps(30, end),
    blink-caret 1s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 105% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: rgba(0, 255, 0, 0.2) }
}