@import url("https://fonts.googleapis.com/css2?family=Bruno+Ace&display=swap");

svg {
  font-family: "Bruno Ace", sans-serif;
  width: 100%;
  height: auto;
  display: block;
}

svg text {
  font-size: 8vw; /* Default responsive size for most screens */
  animation: stroke 5s infinite alternate;
  stroke-width: 2;
  stroke: #7329B0;
}

/* Make text larger on small screens (e.g., < 480px width) */
@media (max-width: 480px) {
  svg text {
    font-size: 18vw; /* Increase size on very small screens */
  }
}


@keyframes stroke {
  0% {
    fill: rgba(167, 59, 255, 0);
    stroke: rgba(115, 41, 176, 1);
    stroke-dashoffset: 25%;
    stroke-dasharray: 0 50%;
    stroke-width: 2;
  }
  70% {
    fill: rgba(167, 59, 255, 0);
    stroke: rgba(115, 41, 176, 1);
  }
  80% {
    fill: rgba(167, 59, 255, 0);
    stroke: rgba(115, 41, 176, 1);
    stroke-width: 3;
  }
  100% {
    fill: rgba(167, 59, 255, 1);
    stroke: rgba(115, 41, 176, 0);
    stroke-dashoffset: -25%;
    stroke-dasharray: 50% 0;
    stroke-width: 0;
  }
}

.wrapper {
  background-color: #ffffff00;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
}