body {
  font-family: "Sniglet";
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;
  background-color: orange;
  background-image: linear-gradient(#ff6f00e7 0%, #fdedc2 100%);
}

.svg_1,
.svg_2 {
  /* min-width: 80vw;
  max-width: 40vw; */
  width: clamp(20vw, 70vw, 80vw);
  height: auto;
}

.svg_logo {
  fill: #ff6f00e7;
}

.sun_solo {
  fill: url(#myRadialGradient);
  animation: pulse 4s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  /* 23% { opacity: 0.85; } */
  50% { opacity: 0.2; }
  /* 26% { opacity: 0.9; }
  42% { opacity: 1; }
  44% { opacity: 0.2; }
  46% { opacity: 0.85; }
  72% { opacity: 0.95; }
  74% { opacity: 0.3; }
  76% { opacity: 1; } */
}

.info_text {
  font-size: clamp(1.5rem, 25vw, 3rem);
  line-height: 3rem;
  text-align: center;
  width: 80%;
  color: white;
  margin: 2vh auto 2vh auto;
}

@media (min-width: 768px) {
  /* when big */
  .svg_1,
  .svg_2 {
    width: 45%;
  }
  .info_text {
    font-size: clamp(1.5rem, 30vw, 3rem);
    line-height: 3rem;
    margin: 2vh auto 2vh auto;
    text-align: center;
    width: 100%;
  }
  .crawler-container {
    width: 45%;
  }
}

/* CRAWL */

/* Container that hides the text when it goes off-screen */
.crawler-container {
  width: clamp(2rem, 90vw, 25rem);
  overflow: hidden;
  background: #ff6f00e7;
  color: #fff;
  padding: 12px 0;
  /* font-family: 'Sniglet', sans-serif; */
  /* font-weight: bold; */
  text-transform: uppercase;
  letter-spacing: 2px;
  /* box-shadow: 0 4px 6px rgba(0,0,0,0.1); */
  margin-top: 4rem;
}

/* The moving element */
.crawler-text {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%; /* Push the text completely off-screen to the right to start */
  animation: crawl 15s linear infinite;
}

/* The animation logic */
@keyframes crawl {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

/* Optional: Pause the crawl when hovering */
.crawler-container:hover .crawler-text {
  animation-play-state: paused;
}
