.avant {
  width: 100%;
  height: 100%;

  --star-radius: 4px;
  --circle-radius: 80px;
  --circle-y: 30%;
  --circle-color-stop: 70%;

  --sea-color-stop1: 78%;
  --sea-color-stop2: 80%;

  --sky-start-night: #181a28;
  --sky-end-night: #30303f;
  --sea-start-night: #1d2030;
  --sea-end-night: #35303d;
  --circle-night: #f3dfb7;
  --star-night: #dddddd;

  --sky-start-day: #2e65af;
  --sky-end-day: #8fc4d6;
  --sea-start-day: #275780;
  --sea-end-day: #659bab;
  --circle-day: #f5f5f7;
}

.avant {
  position: relative;
}

/* Night. */
.avant::before {
  content: "";
  position: absolute;

  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  background: radial-gradient(
      circle var(--star-radius) at 10% 10%,
      var(--star-night),
      transparent
    ),
    radial-gradient(
      circle var(--star-radius) at 20% 50%,
      var(--star-night),
      transparent
    ),
    radial-gradient(
      circle var(--star-radius) at 90% 20%,
      var(--star-night),
      transparent
    ),
    radial-gradient(
      circle var(--star-radius) at 80% 60%,
      var(--star-night),
      transparent
    ),
    radial-gradient(
      circle var(--star-radius) at 82% 40%,
      var(--star-night),
      transparent
    ),
    radial-gradient(
      circle var(--circle-radius) at center var(--circle-y),
      var(--circle-night),
      var(--circle-night) var(--circle-color-stop),
      transparent
    ),
    linear-gradient(
      to bottom,
      transparent,
      transparent var(--sea-color-stop1),
      var(--sea-start-night) var(--sea-color-stop2),
      var(--sea-end-night)
    ),
    linear-gradient(to bottom, var(--sky-start-night), var(--sky-end-night));
}

@keyframes avant-day-animation {
  0% {
    opacity: 0;
  }
  35% {
    opacity: 0;
  }
  55% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Day. */
.avant::after {
  content: "";
  position: absolute;

  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  background: radial-gradient(
      circle var(--circle-radius) at center var(--circle-y),
      var(--circle-day),
      var(--circle-day) var(--circle-color-stop),
      transparent
    ),
    linear-gradient(
      to bottom,
      transparent,
      transparent var(--sea-color-stop1),
      var(--sea-start-day) var(--sea-color-stop2),
      var(--sea-end-day)
    ),
    linear-gradient(to bottom, var(--sky-start-day), var(--sky-end-day));

  animation: avant-day-animation 12s infinite;
}