body {
  background: #000000;
  display: flex;
  flex-direction: column; /* Stack items vertically */
  align-items: center; /* Center horizontally */
  justify-content: center; /* Center vertically */
  height: 100vh; /* Full viewport height */
  margin: 0;
}

::selection{
    color: #000000;
    background-color: #7847b8;
}

.text-line {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10vw;
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
}

#main-heading{
    animation: dash 1s ease-in forwards 1.5s, filling 2s ease-in forwards 1.5s, shadow 2s ease-in forwards 1.5s;
}


#under-heading{
    font-size: 4vw;
    animation-delay: 2s;
    animation:dash 3s ease-in forwards 3s, filling 2s ease-in forwards 3s, shadow 3s ease-in forwards 3s;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

@media screen and (min-width: 1200px) {
  .text-line {
    font-size: 7.5em;
  }
}

@keyframes filling {
  0%,
  90% {
    fill-opacity: 0;
    fill: #7847b8;
  }
  100% {
    fill-opacity: 0.3;
    fill: #7847b8;
  }
}

@keyframes shadow {
  0% {
    filter: drop-shadow(0 0 0px #000000);
  }
  100% {
    filter: drop-shadow(0 0 10px #7847b8);
  }
}