body.time-of-day-night {
  background-color: #124050;
}
body.time-of-day-night .hero-landscape {
  background-color: #124050;
}
body.time-of-day-night .hero-landscape .layer-water {
  background-color: #124050;
}

body.time-of-day-morning {
  background-color: #00a19a;
}
body.time-of-day-morning .hero-landscape {
  background-color: #00a19a;
}
body.time-of-day-morning .hero-landscape .layer-water {
  background-color: #00a19a;
}

body.time-of-day-forenoon {
  background-color: #00a19a;
}
body.time-of-day-forenoon .hero-landscape {
  background-color: #00a19a;
}
body.time-of-day-forenoon .hero-landscape .layer-water {
  background-color: #00a19a;
}

body.time-of-day-afternoon {
  background-color: #00a19a;
}
body.time-of-day-afternoon .hero-landscape {
  background-color: #00a19a;
}
body.time-of-day-afternoon .hero-landscape .layer-water {
  background-color: #00a19a;
}

body.time-of-day-evening {
  background-color: #124050;
}
body.time-of-day-evening .hero-landscape {
  background-color: #124050;
}
body.time-of-day-evening .hero-landscape .layer-water {
  background-color: #124050;
}

.hero-landscape {
  aspect-ratio: 16/9;
  background-color: red;
  max-height: 100vh;
  overflow: hidden;
  position: relative;
  width: 100%;
}
@media (min-aspect-ratio: 16/9) {
  .hero-landscape {
    aspect-ratio: unset;
    height: 100vh;
  }
}
.hero-landscape .layer-mountains-front {
  aspect-ratio: 1240/105;
  background-color: #008060;
  clip-path: polygon(0% 100%, 3% 91%, 8% 89%, 13% 85%, 17% 80%, 18% 78%, 25% 77%, 27% 70%, 28% 67%, 31% 54%, 34% 46%, 36% 39%, 38% 41%, 39% 18%, 41% 7%, 43% 2%, 45% 3%, 47% 7%, 48% 2%, 53% 0%, 58% 2%, 59% 2%, 61% 14%, 63% 20%, 64% 29%, 64% 37%, 67% 37%, 67% 46%, 69% 44%, 75% 62%, 80% 71%, 83% 75%, 86% 80%, 90% 86%, 93% 87%, 97% 96%, 100% 100%);
  max-width: 1240px;
  z-index: 3;
}
.hero-landscape .layer-mountains-mid {
  aspect-ratio: 818/40;
  background-color: #2e3192;
  clip-path: polygon(0% 75%, 1% 82%, 3% 63%, 6% 64%, 8% 39%, 11% 67%, 16% 55%, 19% 43%, 23% 26%, 26% 23%, 35% 22%, 38% 4%, 43% 22%, 47% 34%, 51% 2%, 56% 53%, 62% 76%, 67% 83%, 72% 48%, 75% 49%, 82% 1%, 85% 27%, 90% 30%, 92% 30%, 93% 28%, 95% 32%, 98% 31%, 100% 41%, 100% 100%, 0% 100%);
  max-width: 818px;
  z-index: 2;
}
.hero-landscape .layer-mountains-back {
  aspect-ratio: 1920/70;
  background-color: #662d91;
  clip-path: polygon(0% 47%, 3% 46%, 5% 55%, 6% 55%, 7% 60%, 10% 53%, 13% 50%, 14% 52%, 15% 48%, 16% 55%, 24% 58%, 30% 58%, 37% 59%, 40% 55%, 42% 53%, 45% 56%, 47% 55%, 49% 53%, 51% 48%, 52% 43%, 53% 44%, 53% 40%, 55% 45%, 57% 43%, 57% 50%, 63% 54%, 72% 52%, 79% 54%, 82% 54%, 84% 49%, 86% 41%, 86% 36%, 87% 44%, 89% 49%, 91% 52%, 92% 51%, 93% 46%, 95% 47%, 96% 51%, 98% 54%, 100% 61%, 0% 64%);
  max-width: 1920px;
  z-index: 1;
}
.hero-landscape .hero-loader {
  align-items: center;
  background-color: inherit;
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  opacity: 1;
  position: absolute;
  top: 0;
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
  visibility: visible;
  width: 100%;
  z-index: 99;
}
.hero-landscape .hero-loader .spinner {
  animation: spin 0.8s linear infinite;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  border-top-color: #ffffff;
  height: 40px;
  width: 40px;
}
.hero-landscape.is-loaded .hero-loader {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/*# sourceMappingURL=main.css.map */