#stars {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.star {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  opacity: var(--base-opacity);
  animation: twinkle var(--twinkle-duration) ease-in-out infinite alternate;
}

@keyframes twinkle {
  from {
    opacity: var(--base-opacity);
  }
  to {
    opacity: var(--twinkle-opacity);
  }
}

/* Shooting stars */
#shooting-stars {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.shooting-star {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, #fff, transparent);
  animation: shoot 0.8s linear forwards;
}

@keyframes shoot {
  from {
    transform: translate(0, 0);
    opacity: 1;
  }
  to {
    transform: translate(600px, 600px);
    opacity: 0;
  }
}