.night-sky {
  z-index: -1;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  --sky-colour: #1b2735;
  --darker-sky-colour: #090a0f;
  background: radial-gradient(ellipse at bottom, var(--sky-colour) 0%, var(--darker-sky-colour) 100%);
}
.night-sky .pointed-star-4::after {
  clip-path: polygon(0% 50%, 40% 40%, 50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%);
}
.night-sky .pointed-star-8::after {
  clip-path: polygon(0% 50%, 30% 40%, 25% 25%, 40% 30%, 50% 0%, 60% 30%, 75% 25%, 70% 40%, 100% 50%, 70% 60%, 75% 75%, 60% 70%, 50% 100%, 40% 70%, 25% 75%, 30% 60%, 0% 50%);
}
.night-sky .pointed-star-8-skinny::after {
  clip-path: polygon(0% 50%, 35% 45%, 25% 25%, 45% 35%, 50% 0%, 55% 35%, 75% 25%, 65% 45%, 100% 50%, 65% 55%, 75% 75%, 55% 65%, 50% 100%, 45% 65%, 25% 75%, 35% 55%, 0% 50%);
}
.night-sky .star {
  --size: 1;
}
.night-sky .star {
  position: absolute;
  background: linear-gradient(-45deg, var(--colour), rgba(0, 0, 255, 0));
  filter: drop-shadow(0 0 6px var(--colour));
  opacity: 1;
  width: calc(var(--size) * 2px);
  height: calc(var(--size) * 100px);
  transform: rotate(-45deg);
  animation: shooting-star ease-in-out infinite;
  animation-duration: var(--duration);
  animation-delay: var(--delay);
  top: var(--top);
  left: var(--left);
}
.night-sky .star::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: -5px;
  width: calc(var(--size) * 7px);
  height: calc(var(--size) * 7px);
  border: var(--colour) 3.5px solid;
  background-color: var(--colour);
  transform: rotate(45deg);
}
@keyframes shooting-star {
  0% {
    opacity: 0;
    transform: rotate(var(--angle)) translateY(0);
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: rotate(var(--angle)) translateY(var(--travel-dist));
    opacity: 0;
  }
}

/*# sourceMappingURL=shooting-stars.css.map */