change the particle background into something more creative

script.js

@@ -41,5 +41,39 @@ document.addEventListener('DOMContentLoaded', function() {
 });
 function createParticleNetwork() {
     const container = document.querySelector('.cosmic-web');
-    // No particles needed for the grid background
+    const particleCount = 100;
+    
+    for (let i = 0; i < particleCount; i++) {
+        const particle = document.createElement('div');
+        particle.classList.add('cosmic-particle');
+        
+        // Random position
+        const x = Math.random() * 100;
+        const y = Math.random() * 100;
+        
+        // Random size
+        const size = Math.random() * 4 + 1;
+        
+        // Random animation duration
+        const duration = Math.random() * 20 + 10;
+        
+        // Random delay
+        const delay = Math.random() * 10;
+        
+        // Random color (neon blue or magenta)
+        const colors = ['rgba(15, 240, 252, 0.8)', 'rgba(255, 0, 255, 0.8)'];
+        const color = colors[Math.floor(Math.random() * colors.length)];
+        
+        particle.style.cssText = `
+            left: ${x}%;
+            top: ${y}%;
+            width: ${size}px;
+            height: ${size}px;
+            background: ${color};
+            box-shadow: 0 0 ${size*2}px ${size}px ${color};
+            animation: float ${duration}s infinite ${delay}s ease-in-out;
+        `;
+        
+        container.appendChild(particle);
+    }
 }

style.css

@@ -218,57 +218,83 @@ box-shadow: 0 0 30px rgba(15, 240, 252, 0.5),
         left: 150%;
     }
 }
-/* Cosmic Grid Background */
+/* Cosmic Particle Background */
 .cosmic-web {
     position: absolute;
     inset: 0;
     background: 
-        radial-gradient(circle at center, transparent 0%, rgba(10, 10, 10, 0.9) 80%, #0a0a0a 100%),
-        linear-gradient(135deg, #0a0a0a 0%, #111 100%);
+        radial-gradient(circle at center, rgba(10, 10, 10, 0.9) 0%, #0a0a0a 100%);
     overflow: hidden;
 }
 
+.cosmic-particle {
+    position: absolute;
+    border-radius: 50%;
+    pointer-events: none;
+    transform: translate(-50%, -50%);
+    filter: blur(1px);
+    opacity: 0.8;
+    z-index: 1;
+}
+
+@keyframes float {
+    0%, 100% {
+        transform: translate(-50%, -50%) translateY(0) translateX(0);
+        opacity: 0.8;
+    }
+    25% {
+        transform: translate(-50%, -50%) translateY(-20px) translateX(10px);
+        opacity: 1;
+    }
+    50% {
+        transform: translate(-50%, -50%) translateY(0) translateX(20px);
+        opacity: 0.9;
+    }
+    75% {
+        transform: translate(-50%, -50%) translateY(20px) translateX(10px);
+        opacity: 0.7;
+    }
+}
+
+/* Star Field */
 .cosmic-web::before {
     content: '';
     position: absolute;
     inset: 0;
     background: 
-        linear-gradient(rgba(15, 240, 252, 0.03) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(15, 240, 252, 0.03) 1px, transparent 1px),
-        linear-gradient(rgba(255, 0, 255, 0.02) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(255, 0, 255, 0.02) 1px, transparent 1px);
-    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
-    animation: gridMove 60s linear infinite;
+        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.03) 0%, transparent 2%) 0 0,
+        radial-gradient(circle at 40% 70%, rgba(255, 255, 255, 0.03) 0%, transparent 2%) 50px 50px,
+        radial-gradient(circle at 60% 20%, rgba(255, 255, 255, 0.03) 0%, transparent 2%) 100px 100px;
+    background-size: 150px 150px;
+    animation: starMove 100s linear infinite;
 }
 
-@keyframes gridMove {
-    0% {
-        background-position: 0 0, 0 0, 0 0, 0 0;
+@keyframes starMove {
+    from {
+        background-position: 0 0;
     }
-    100% {
-        background-position: -200px -200px, -200px -200px, -40px -40px, -40px -40px;
+    to {
+        background-position: 1000px 500px;
     }
 }
 
-/* Glowing Nodes */
+/* Cosmic Energy Waves */
 .cosmic-web::after {
     content: '';
     position: absolute;
-    width: 100%;
-    height: 100%;
+    inset: 0;
     background: 
-        radial-gradient(circle at 20% 30%, rgba(15, 240, 252, 0.1) 0%, transparent 20%),
-        radial-gradient(circle at 70% 80%, rgba(255, 0, 255, 0.1) 0%, transparent 20%),
-        radial-gradient(circle at 40% 60%, rgba(15, 240, 252, 0.1) 0%, transparent 20%),
-        radial-gradient(circle at 80% 20%, rgba(255, 0, 255, 0.1) 0%, transparent 20%);
-    animation: pulseNodes 8s infinite alternate;
+        radial-gradient(circle at center, transparent 60%, rgba(15, 240, 252, 0.05) 80%, transparent 100%);
+    animation: pulseWave 12s infinite ease-in-out;
 }
 
-@keyframes pulseNodes {
-    0% {
-        opacity: 0.3;
+@keyframes pulseWave {
+    0%, 100% {
+        transform: scale(1);
+        opacity: 0.2;
     }
-    100% {
-        opacity: 0.7;
+    50% {
+        transform: scale(1.2);
+        opacity: 0.5;
     }
 }