Make the background stars fill the entire screen width

Refactors CSS and JS to implement a stars-container that spans the full viewport width and positions stars accordingly.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 5e584ab0-c340-4432-97ef-1972582b60e9
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: a6d959e1-4446-4285-8e3f-38c176460537
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d0a1d46d-d203-4308-bc6a-312ac7c0243b/5e584ab0-c340-4432-97ef-1972582b60e9/GG0DPhp

static/css/styles.css

@@ -310,20 +310,21 @@ hr {
     position: relative;
 }
 
-.home-info::before {
-    content: '';
+.home-info > * {
+    position: relative;
+    z-index: 2;
+}
+
+.stars-container {
     position: absolute;
     top: 0;
-    left: -5%;
-    width: 110%;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100vw;
     height: 100%;
     pointer-events: none;
     z-index: 0;
-}
-
-.home-info > * {
-    position: relative;
-    z-index: 1;
+    overflow: hidden;
 }
 
 .star {

static/js/scripts.js

@@ -395,9 +395,12 @@ function initStars() {
     const sections = document.querySelectorAll('.home-info');
     
     sections.forEach(section => {
+        const starContainer = document.createElement('div');
+        starContainer.className = 'stars-container';
+        
         const sectionHeight = section.offsetHeight;
-        const sectionWidth = section.offsetWidth;
-        const numStars = Math.floor((sectionWidth * sectionHeight) / 15000);
+        const viewportWidth = window.innerWidth;
+        const numStars = Math.floor((viewportWidth * sectionHeight) / 15000);
         
         for (let i = 0; i < numStars; i++) {
             const star = document.createElement('div');
@@ -416,7 +419,9 @@ function initStars() {
             star.style.setProperty('--duration', duration + 's');
             star.style.setProperty('--delay', delay + 's');
             
-            section.appendChild(star);
+            starContainer.appendChild(star);
         }
+        
+        section.appendChild(starContainer);
     });
 }