sync

public/css/style.css

@@ -9,12 +9,29 @@
 }
 
 @layer base {
+  #particles-js {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 0;
+    pointer-events: none;
+  }
+  
+  #particles-js canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
   html {
     @apply h-full;
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-    overflow-x: hidden;
   }
 
   *,
@@ -24,7 +41,7 @@
   }
 
   body {
-    @apply min-h-full flex flex-col bg-gray-900 text-white;
+    @apply min-h-full flex flex-col text-white;
     font-family: 'Roboto', 'Verdana', sans-serif;
     overflow-x: hidden;
   }
@@ -639,24 +656,7 @@
   background-color: #151d31;
 }
 
-#particles-js {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  z-index: 0;
-  pointer-events: none;
-}
 
-#particles-js canvas {
-  display: block;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
 
 @media (max-width: 480px) {
   .section-bg {

public/css/style.min.css

@@ -938,12 +938,28 @@
   font-display: swap;
 }
 @layer base {
+  #particles-js {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 0;
+    pointer-events: none;
+  }
+  #particles-js canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
   html {
     height: 100%;
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-    overflow-x: hidden;
   }
   *, *:before, *:after {
     box-sizing: inherit;
@@ -952,7 +968,6 @@
     display: flex;
     min-height: 100%;
     flex-direction: column;
-    background-color: var(--color-gray-900);
     color: var(--color-white);
     font-family: 'Roboto', 'Verdana', sans-serif;
     overflow-x: hidden;
@@ -1803,23 +1818,6 @@
 .bg-gray-700 {
   background-color: #151d31;
 }
-#particles-js {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  z-index: 0;
-  pointer-events: none;
-}
-#particles-js canvas {
-  display: block;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
 @media (max-width: 480px) {
   .section-bg {
     padding: calc(var(--spacing) * 2);

public/test.html

@@ -76,6 +76,8 @@
     </header>
 
     <div id="app" class="flex-grow">
+        <div id="particles-js" style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1;"></div>
+
         <!-- Login Page and Modals -->
         <div id="loginPage" class="modal hidden">
             <div class="modal-content">
@@ -534,8 +536,6 @@
             </div>
     </div>
     </main>
-    <div id="particles-js" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;"></div>
-
 
     <footer class="bg-[rgba(10,17,40,0.75)] backdrop-filter backdrop-blur-xl py-8 text-center relative z-2">
         <p class="text-sm opacity-90">© 2025 My-MC.Link. All rights reserved.</p>