.stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(1px 1px at 20px 30px, #00aaff, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 40px 70px, #ff00ff, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 50px 160px, #aaff00, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 90px 40px, #00ffff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 150px 100px, #ffff00, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 200px 200px, #ff00aa, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 220px 340px, #aaffff, rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 250px 250px;
  opacity: 0.8;
  animation: stars-slow-pan 150s linear infinite;
}

.stars2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(1px 1px at 10px 50px, #00ffff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 80px 30px, #ffff00, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 120px 140px, #ff00aa, rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 300px 300px;
  opacity: 0.6;
  animation: stars-slow-pan 250s linear infinite;
}

.stars3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(2px 2px at 50px 50px, #ffaa00, rgba(0,0,0,0)),
    radial-gradient(3px 3px at 100px 100px, #aaffff, rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 400px 400px;
  opacity: 0.4;
  animation: stars-slow-pan 350s linear infinite;
}

@keyframes stars-slow-pan {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-250px);
  }
}

@keyframes stars-slow-pan-x {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-250px);
  }
}

.stars-horizontal {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(255, 255, 255, 0.8), rgba(0,0,0,0)),
    radial-gradient(2px 2px at 150px 100px, rgba(200, 255, 255, 0.8), rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 220px 340px, rgba(255, 200, 200, 0.8), rgba(0,0,0,0)),
    radial-gradient(2px 2px at 300px 50px, rgba(255, 255, 200, 0.9), rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 350px 350px;
  animation: stars-slow-pan-x 120s linear infinite, stars-shimmer 6s infinite alternate;
  pointer-events: none;
  z-index: -1;
}

.stars-horizontal2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background-image:
    radial-gradient(1px 1px at 10px 50px, rgba(255, 255, 255, 0.6), rgba(0,0,0,0)),
    radial-gradient(2px 2px at 80px 30px, rgba(180, 220, 255, 0.5), rgba(0,0,0,0)),
    radial-gradient(1px 1px at 120px 140px, rgba(255, 220, 180, 0.7), rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 250px 250px;
  animation: stars-slow-pan-x 180s linear infinite, stars-shimmer 8s infinite alternate;
  pointer-events: none;
  z-index: -1;
}

@keyframes stars-shimmer {
  0% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { opacity: 0.5; }
}