make the animated particles visible

components/particles.js

@@ -15,17 +15,17 @@ class ParticlesBackground extends HTMLElement {
         }
         .particle {
           position: absolute;
-          background-color: rgba(255, 255, 255, 0.05);
+          background-color: rgba(255, 255, 255, 0.15);
           border-radius: 50%;
           pointer-events: none;
-          filter: blur(0.5px);
+          filter: blur(1px);
         }
         .particle:nth-child(3n) {
-          background-color: rgba(100, 220, 255, 0.03);
+          background-color: rgba(100, 220, 255, 0.15);
         }
         .particle:nth-child(5n) {
-          background-color: rgba(255, 100, 220, 0.03);
-        }
+          background-color: rgba(255, 100, 220, 0.15);
+}
       </style>
 <div id="particles-container"></div>
     `;
@@ -36,12 +36,12 @@ class ParticlesBackground extends HTMLElement {
 
   createParticles() {
     const container = this.shadowRoot.getElementById('particles-container');
-    const particleCount = 30;
+    const particleCount = 50;
 for (let i = 0; i < particleCount; i++) {
       const particle = document.createElement('div');
       particle.classList.add('particle');
       // Random size between 0.5 and 2px
-      const size = Math.random() * 1.5 + 0.5;
+      const size = Math.random() * 2 + 1;
 particle.style.width = `${size}px`;
       particle.style.height = `${size}px`;
       

style.css

@@ -49,9 +49,9 @@ body::before {
     left: 0;
     width: 100%;
     height: 100%;
-    background: 
-        radial-gradient(circle at 20% 30%, rgba(40,40,40,0.1) 0%, transparent 30%),
-        radial-gradient(circle at 80% 70%, rgba(40,40,40,0.1) 0%, transparent 30%);
-    pointer-events: none;
+    background:
+        radial-gradient(circle at 20% 30%, rgba(40,40,40,0.4) 0%, transparent 30%),
+        radial-gradient(circle at 80% 70%, rgba(40,40,40,0.4) 0%, transparent 30%);
+pointer-events: none;
     z-index: -2;
 }