playing with stars

style.css

@@ -16,6 +16,8 @@ body {
     overflow-x: hidden;
 }
 
+
+/* Move the stars to another pseudo-element */
 body::before {
     content: '';
     position: fixed;
@@ -24,68 +26,54 @@ body::before {
     width: 100%;
     height: 100%;
     background-image: 
-        radial-gradient(1.5px 1.5px at 20px 30px, rgba(255, 255, 255, 0.8), transparent),
-        radial-gradient(1.5px 1.5px at 40px 70px, rgba(255, 255, 255, 0.6), transparent),
-        radial-gradient(1.5px 1.5px at 90px 40px, rgba(255, 255, 255, 1.0), transparent),
-        radial-gradient(1.5px 1.5px at 130px 80px, rgba(255, 255, 255, 0.4), transparent),
-        radial-gradient(1.5px 1.5px at 160px 30px, rgba(255, 255, 255, 0.7), transparent),
-        radial-gradient(1.5px 1.5px at 200px 90px, rgba(255, 255, 255, 0.5), transparent),
-        radial-gradient(1.5px 1.5px at 240px 50px, rgba(255, 255, 255, 0.8), transparent),
-        radial-gradient(1.5px 1.5px at 280px 10px, rgba(255, 255, 255, 0.6), transparent),
-        radial-gradient(1.5px 1.5px at 320px 70px, rgba(255, 255, 255, 1.0), transparent),
-        radial-gradient(1.5px 1.5px at 360px 40px, rgba(255, 255, 255, 0.4), transparent);
+        /* Varied star sizes and opacities */
+        radial-gradient(1.0px 1.0px at 20px 30px, rgba(255, 255, 255, 0.8), transparent),
+        radial-gradient(1.8px 1.8px at 40px 70px, rgba(255, 255, 255, 0.6), transparent),
+        radial-gradient(0.7px 0.7px at 90px 40px, rgba(255, 255, 255, 1.0), transparent),
+        radial-gradient(2.2px 2.2px at 130px 80px, rgba(255, 255, 255, 0.4), transparent),
+        radial-gradient(1.3px 1.3px at 160px 30px, rgba(255, 255, 255, 0.7), transparent),
+        radial-gradient(0.9px 0.9px at 200px 90px, rgba(255, 255, 255, 0.5), transparent),
+        radial-gradient(1.7px 1.7px at 240px 50px, rgba(255, 255, 255, 0.8), transparent),
+        radial-gradient(1.1px 1.1px at 280px 10px, rgba(255, 255, 255, 0.6), transparent),
+        radial-gradient(0.6px 0.6px at 320px 70px, rgba(255, 255, 255, 1.0), transparent),
+        radial-gradient(1.5px 1.5px at 360px 40px, rgba(255, 255, 255, 0.4), transparent),
+        /* Add more varied stars */
+        radial-gradient(0.4px 0.4px at 45px 120px, rgba(255, 255, 255, 0.7), transparent),
+        radial-gradient(1.2px 1.2px at 105px 160px, rgba(255, 255, 255, 0.5), transparent),
+        radial-gradient(0.8px 0.8px at 185px 95px, rgba(255, 255, 255, 0.9), transparent),
+        radial-gradient(1.9px 1.9px at 265px 135px, rgba(255, 255, 255, 0.6), transparent);
     background-repeat: repeat;
-    background-size: 400px 100px;
+    background-size: 400px 200px;
     animation: starfield 60s linear infinite;
     pointer-events: none;
-    z-index: 1;
-}
-
-body::after {
-    content: '';
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-image: 
-        radial-gradient(0.5px 0.5px at 15px 25px, rgba(120, 117, 255, 0.6), transparent),
-        radial-gradient(0.5px 0.5px at 75px 15px, rgba(120, 117, 255, 0.4), transparent),
-        radial-gradient(0.5px 0.5px at 115px 60px, rgba(120, 117, 255, 0.7), transparent),
-        radial-gradient(0.5px 0.5px at 180px 35px, rgba(120, 117, 255, 0.3), transparent),
-        radial-gradient(0.5px 0.5px at 220px 85px, rgba(120, 117, 255, 0.5), transparent);
-    background-repeat: repeat;
-    background-size: 300px 120px;
-    animation: starfield-slow 80s linear infinite reverse;
-    pointer-events: none;
-    z-index: 1;
+    z-index: 2;
 }
 
 @keyframes starfield {
     0% {
         transform: translateY(0) translateX(0);
-        opacity: 1;
+        opacity: 0.8;
     }
     50% {
-        opacity: 0.8;
+        opacity: 1;
     }
     100% {
         transform: translateY(-100px) translateX(-50px);
-        opacity: 1;
+        opacity: 0.8;
     }
 }
 
 @keyframes starfield-slow {
     0% {
         transform: translateY(0) translateX(0);
-        opacity: 0.8;
+        opacity: 0.7;
     }
     50% {
-        opacity: 1;
+        opacity: 0.9;
     }
     100% {
         transform: translateY(-120px) translateX(30px);
-        opacity: 0.8;
+        opacity: 0.7;
     }
 }