.intro-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #f7931a;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fadeOut 0.5s ease-in-out 6s forwards;
}

.intro-text {
  color: #001f3f;
  font-size: 2.5rem;
  text-align: center;
  max-width: 80%;
  opacity: 0;
  animation: fadeIn 0.5s ease-in-out 0.5s forwards;
  font-family: "Schoolbell", cursive;
  padding: 2rem;

  @media (max-width: 768px) {
    font-size: 1.5rem;
    padding: 1rem;
    max-width: 90%;
  }
}

.typing-animation {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid #001f3f;
  width: 0;
  animation: typing 4s steps(50) 1s forwards, blink 0.75s step-end infinite;

  @media (max-width: 768px) {
    display: block;
    white-space: pre-wrap;
    border-right: none;
    position: relative;
    width: auto;
    animation: none;
    
    &::after {
      content: '';
      position: absolute;
      right: -2px;
      top: 0;
      height: 100%;
      width: 100%;
      background: #f7931a;
      animation: mobileTyping 4s steps(50) 1s forwards;
      border-left: 2px solid #001f3f;
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes mobileTyping {
  from {
    width: 100%;
  }
  to {
    width: 0;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}