/* Estilos para el preloader */
.preloader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

.earth-loader {
  --watercolor: #3344c1;
  --landcolor: #7cc133;
  width: 7.5em;
  height: 7.5em;
  background-color: var(--watercolor);
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  box-shadow:
    inset 0em 0.5em rgb(255, 255, 255, 0.25),
    inset 0em -0.5em rgb(0, 0, 0, 0.25);
  border: solid 0.15em white;
  /* Removed startround animation here, as it seemed to cause initial blankness */
}

/* .earth p {
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 0.25em;


} */

.earth-loader svg:nth-child(1) {
  position: absolute;
  bottom: -2em;
  width: 7em;
  height: auto;
  animation: round1 5s infinite linear; /* Removed the 0.75s delay */
}

.earth-loader svg:nth-child(2) {
  position: absolute;
  top: -3em;
  width: 7em;
  height: auto;
  animation: round1 5s infinite linear;
}
.earth-loader svg:nth-child(3) {
  position: absolute;
  top: -2.5em;
  width: 7em;
  height: auto;
  animation: round2 5s infinite linear;
}
.earth-loader svg:nth-child(4) {
  position: absolute;
  bottom: -2.2em;
  width: 7em;
  height: auto;
  animation: round2 5s infinite linear; /* Removed the 0.75s delay */
}

/* @keyframes startround {
  0% {
    filter: brightness(500%);
    box-shadow: none;
  }
  75% {
    filter: brightness(500%);
    box-shadow: none;
  }
  100% {
    filter: brightness(100%);
    box-shadow:
      inset 0em 0.5em rgb(255, 255, 255, 0.25),
      inset 0em -0.5em rgb(0, 0, 0, 0.25);
  }
} */ /* Removed this animation as it was causing the initial blankness and then filling */

@keyframes round1 {
  0% {
    left: -2em;
    opacity: 100%;
    transform: skewX(0deg) rotate(0deg);
  }
  30% {
    left: -6em;
    opacity: 100%;
    transform: skewX(-25deg) rotate(25deg);
  }
  31% {
    left: -6em;
    opacity: 0%;
    transform: skewX(-25deg) rotate(25deg);
  }
  35% {
    left: 7em;
    opacity: 0%;
    transform: skewX(25deg) rotate(-25deg);
  }
  45% {
    left: 7em;
    opacity: 100%;
    transform: skewX(25deg) rotate(-25deg);
  }
  100% {
    left: -2em;
    opacity: 100%;
    transform: skewX(0deg) rotate(0deg);
  }
}

@keyframes round2 {
  0% {
    left: 5em;
    opacity: 100%;
    transform: skewX(0deg) rotate(0deg);
  }
  75% {
    left: -7em;
    opacity: 100%;
    transform: skewX(-25deg) rotate(25deg);
  }
  76% {
    left: -7em;
    opacity: 0%;
    transform: skewX(-25deg) rotate(25deg);
  }
  77% {
    left: 8em;
    opacity: 0%;
    transform: skewX(25deg) rotate(-25deg);
  }
  80% {
    left: 8em;
    opacity: 100%;
    transform: skewX(25deg) rotate(-25deg);
  }
  100% {
    left: 5em;
    opacity: 100%;
    transform: skewX(0deg) rotate(0deg);
  }
}

/* Estilos para la página */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #3344c1;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

#contenido {
  display: none;
}
.letra-luck {
  font-family: "Luckiest Guy" !important;
  margin-top: 18rem;
  color: bisque;
  font-size: clamp(16px, 5vw, 48px)!important;
  text-align: center;
  font-style: italic!important;
  font-weight: bold;
}

.earth-loader svg {
  will-change: transform;
}


@media (max-width:768px){
  .letra-luck{
      margin-top: 14rem;
  }
}