.starfield {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* General star styling */
.shooting-star {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  opacity: 0;
  animation: shooting-star 4s linear infinite, glow 1s infinite alternate;
}

/* Tail effect */
.shooting-star::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 2px;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%) rotate(45deg);
  opacity: 0;
  animation: tail 4s linear infinite;
}

/* Keyframes for shooting star animation */
@keyframes shooting-star {
  0% {
      opacity: 1;
      transform: translate(0, 0) rotate(45deg);
  }
  100% {
      opacity: 0;
      transform: translate(100vw, 100vh) rotate(45deg);
  }
}

/* Keyframes for tail animation */
@keyframes tail {
  0% {
      opacity: 0.7;
      transform: scaleX(1) translateX(0);
  }
  100% {
      opacity: 0;
      transform: scaleX(3) translateX(100px);
  }
}

/* Keyframes for glow effect */
@keyframes glow {
  0% {
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  }
  100% {
      box-shadow: 0 0 20px rgba(255, 255, 255, 1);
  }
}

/* Keyframes for different directions */
@keyframes shooting-star1 {
  0% {
      top: -10%;
      left: -10%;
      opacity: 1;
      transform: translate(0, 0) rotate(45deg);
  }
  100% {
      top: 120%;
      left: 120%;
      opacity: 0;
      transform: translate(100vw, 100vh) rotate(45deg);
  }
}

@keyframes shooting-star2 {
  0% {
      top: -10%;
      left: 120%;
      opacity: 1;
      transform: translate(0, 0) rotate(-45deg);
  }
  100% {
      top: 120%;
      left: -10%;
      opacity: 0;
      transform: translate(-100vw, 100vh) rotate(-45deg);
  }
}

@keyframes shooting-star3 {
  0% {
      top: 120%;
      left: -10%;
      opacity: 1;
      transform: translate(0, 0) rotate(30deg);
  }
  100% {
      top: -10%;
      left: 120%;
      opacity: 0;
      transform: translate(100vw, -100vh) rotate(30deg);
  }
}

@keyframes shooting-star4 {
  0% {
      top: -10%;
      left: -10%;
      opacity: 1;
      transform: translate(0, 0) rotate(60deg);
  }
  100% {
      top: 120%;
      left: 120%;
      opacity: 0;
      transform: translate(100vw, 100vh) rotate(60deg);
  }
}

@keyframes shooting-star5 {
  0% {
      top: 120%;
      left: 120%;
      opacity: 1;
      transform: translate(0, 0) rotate(-30deg);
  }
  100% {
      top: -10%;
      left: -10%;
      opacity: 0;
      transform: translate(-100vw, -100vh) rotate(-30deg);
  }
}

@keyframes shooting-star6 {
  0% {
      top: -10%;
      left: 50%;
      opacity: 1;
      transform: translate(0, 0) rotate(-30deg);
  }
  100% {
      top: 110%;
      left: -10%;
      opacity: 0;
      transform: translate(-100vw, 100vh) rotate(-30deg);
  }
}

@keyframes shooting-star7 {
  0% {
      top: 50%;
      left: -10%;
      opacity: 1;
      transform: translate(0, 0) rotate(60deg);
  }
  100% {
      top: -10%;
      left: 120%;
      opacity: 0;
      transform: translate(120vw, -100vh) rotate(60deg);
  }
}

@keyframes shooting-star8 {
  0% {
      top: 120%;
      left: -10%;
      opacity: 1;
      transform: translate(0, 0) rotate(-45deg);
  }
  100% {
      top: -10%;
      left: 50%;
      opacity: 0;
      transform: translate(-100vw, -100vh) rotate(-45deg);
  }
}

@keyframes shooting-star9 {
  0% {
      top: -10%;
      left: 30%;
      opacity: 1;
      transform: translate(0, 0) rotate(75deg);
  }
  100% {
      top: 120%;
      left: 70%;
      opacity: 0;
      transform: translate(100vw, 100vh) rotate(75deg);
  }
}

@keyframes shooting-star10 {
  0% {
      top: 40%;
      left: -10%;
      opacity: 1;
      transform: translate(0, 0) rotate(90deg);
  }
  100% {
      top: -10%;
      left: 120%;
      opacity: 0;
      transform: translate(120vw, -100vh) rotate(90deg);
  }
}

@keyframes shooting-star11 {
  0% {
      top: -40%;
      left: 10%;
      opacity: 8;
      transform: translate(0, 0) rotate(90deg);
  }
  100% {
      top: -10%;
      left: 120%;
      opacity: 0;
      transform: translate(120vw, -100vh) rotate(90deg);
  }
}

@keyframes shooting-star12 {
  0% {
      top: 15%;
      left: 15%;
      opacity: 4;
      transform: translate(0, 0) rotate(96deg);
  }
  100% {
      top: -120%;
      left: 120%;
      opacity: 0;
      transform: translate(100vw, 100vh) rotate(96deg);
  }
}

@keyframes shooting-star13 {
  0% {
      top: 70%;
      left: 10%;
      opacity: 4;
      transform: translate(0, 0) rotate(90deg);
  }
  100% {
      top: -120%;
      left: 120%;
      opacity: 0;
      transform: translate(100vw, 100vh) rotate(90deg);
  }
}

@keyframes shooting-star14 {
  0% {
      top: 80%;
      left: 10%;
      opacity: 4;
      transform: translate(0, 0) rotate(270deg);
  }
  100% {
      top: -120%;
      left: 120%;
      opacity: 0;
      transform: translate(100vw, 100vh) rotate(270deg);
  }
}

@keyframes shooting-star15 {
  0% {
      top: 50%;
      left: 40%;
      opacity: 4;
      transform: translate(0, 0) rotate(180deg);
  }
  100% {
      top: -120%;
      left: 120%;
      opacity: 0;
      transform: translate(100vw, 100vh) rotate(180deg);
  }
}

/* Apply keyframes dynamically */
.shooting-star {
  animation: shooting-star1 4s linear infinite, glow 1s infinite alternate;
}

/* Color classes */
.gold {
  background: #FFD700;
}

.tomato {
  background: #FF6347;
}

.turquoise {
  background: #40E0D0;
}

.orchid {
  background: #DA70D6;
}

.orangered {
  background: #FF4500;
}