.typewriter-container {
  /* Optional: Adjust width based on content if container is too wide by default */
  display: inline-block; 
}

body {
  background-color: black;
}

.css-typing p {
  color: #3ADEB3; /* Text color */
  text-shadow: 0 0 5px #C8C8C8;
  font-family: monospace; /* Monospaced font helps the effect look more natural */
  font-size: 20px;
   max-width: 50ch;
  margin: 0px 0;
  white-space: nowrap; /* Keeps all text on a single line */
  overflow: hidden; /* Ensures content is hidden until the animation reveals it */
  width: 0; /* Starts with zero width */
  opacity: 0; /* Starts hidden */
  border-right: .15em black; /* The 'cursor' effect */
  animation: 
    typewriter 4s steps(40, end) forwards;
    
  /* Adjust the 'steps' value to match the number of characters in the longest line */
  /* 'forwards' ensures the final state (full width) remains after the animation ends */
}

/* Define delays for subsequent lines */
.css-typing p:nth-child(2) {
  animation-delay: 1s; /* Starts after the first line (4s duration) finishes */
}

.css-typing p:nth-child(3) {
  animation-delay: 2s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(4) {
  animation-delay: 5s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(5) {
  animation-delay: 6s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(6) {
  animation-delay: 9s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(7) {
  animation-delay: 11s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(8) {
  animation-delay: 13s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(9) {
  animation-delay: 15s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(10) {
  animation-delay: 17s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(11) {
  animation-delay: 18s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(12) {
  animation-delay: 20s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(13) {
  animation-delay: 22s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(14) {
  animation-delay: 24s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(15) {
  animation-delay: 24s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(16) {
  animation-delay: 24s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(17) {
  animation-delay: 24s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(18) {
  animation-delay: 24s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(19) {
  animation-delay: 24s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(20) {
  animation-delay: 24s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(21) {
  animation-delay: 27s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(22) {
  animation-delay: 28s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(23) {
  animation-delay: 29s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(24) {
  animation-delay: 30s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(25) {
  animation-delay: 31s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(26) {
  animation-delay: 32s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(27) {
  animation-delay: 33s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(28) {
  animation-delay: 34s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(29) {
  animation-delay: 34.4s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(30) {
  animation-delay: 35s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(31) {
  animation-delay: 35.5s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(32) {
  animation-delay: 36s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(33) {
  animation-delay: 36.5s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(34) {
  animation-delay: 37s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(35) {
  animation-delay: 37.5s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(36) {
  animation-delay: 38s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(37) {
  animation-delay: 43s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(38) {
  animation-delay: 44s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(39) {
  animation-delay: 45s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(40) {
  animation-delay: 46s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(41) {
  animation-delay: 47s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(42) {
  animation-delay: 48s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(43) {
  animation-delay: 49s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(44) {
  animation-delay: 50s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(45) {
  animation-delay: 51s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(46) {
  animation-delay: 54s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(47) {
  animation-delay: 53s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(48) {
  animation-delay: 54s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(49) {
  animation-delay: 55s; /* Starts after the second line (4s + 4s total) finishes */
}

.css-typing p:nth-child(50) {
  animation-delay: 56s; /* Starts after the second line (4s + 4s total) finishes */
}

/* Keyframes for the typing effect */
@keyframes typewriter {
  0% { 
    width: 0;
    opacity: 1; /* Make text visible during animation */
  }
  100% { 
    width: 100%; /* Expands to full width, revealing text */
    opacity: 1; 
  }
}

/* Keyframes for the blinking cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: black }
}