/* Container styling for the deep space gradient background */
.starry-sky {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to bottom, #050510, #111126);
  overflow: hidden;
}

/* Pseudo-element to generate and animate the stars */
.starry-sky::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  background: transparent;
  
  /* Multiple box-shadows generate stars at custom X/Y coordinates */
  /* Format: X-axis Y-axis Color, ... */
  box-shadow: 
    15vw 10vh #fff, 25vw 35vh rgba(255,255,255,0.7), 40vw 15vh #fff,
    55vw 50vh #fff, 70vw 20vh rgba(255,255,255,0.8), 85vw 40vh #fff,
    90vw 10vh #fff, 10vw 75vh #fff, 30vw 85vh rgba(255,255,255,0.9),
    50vw 70vh #fff, 65vw 80vh #fff, 80vw 75vh #fff, 95vw 90vh #fff,
    20vw 55vh #fff, 45vw 45vh rgba(255,255,255,0.6), 75vw 60vh #fff;
    
  /* Smooth animation for the twinkling effect */
  animation: twinkle 4s ease-in-out infinite alternate;
}

/* Keyframes to change the opacity over time */
@keyframes twinkle {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.4;
  }
}