404update

404.html → 404 page/404.html

@@ -14,6 +14,6 @@ <h1>404!</h1>
             <a href="/games/">Click here to go back to the Homepage</a>
         </div>
     </div>
-    <script src="script.js"></script>
+    <script src="glow.js"></script>
 </body>
 </html>

404 page/glow.js

@@ -0,0 +1,13 @@
+document.addEventListener('mousemove', (event) => {
+    const glow = document.querySelector('.glow');
+    const { clientX: x, clientY: y } = event;
+
+    glow.style.transform = `translate(${x - 100}px, ${y - 100}px)`;
+});
+
+document.addEventListener('DOMContentLoaded', () => {
+    const container = document.querySelector('.container');
+    const glow = document.createElement('div');
+    glow.classList.add('glow');
+    container.appendChild(glow);
+});

styles.css → 404 page/styles.css

@@ -4,9 +4,10 @@ body {
     display: flex;
     justify-content: center;
     align-items: center;
-    background: #f27b21;
+    background: #000;
     overflow: hidden;
     font-family: Arial, sans-serif;
+    color: #fff;
 }
 
 .container {
@@ -16,34 +17,20 @@ body {
     display: flex;
     justify-content: center;
     align-items: center;
-    background: radial-gradient(circle at center, rgba(255, 193, 7, 0.6), rgba(255, 87, 34, 0.6));
     overflow: hidden;
 }
 
-.container::before {
-    content: '';
-    position: absolute;
-    top: -50%;
-    left: -50%;
-    width: 200%;
-    height: 200%;
-    background: radial-gradient(circle at center, rgba(255, 193, 7, 0.4), rgba(255, 87, 34, 0.4));
-    filter: blur(100px);
-    z-index: 1;
-}
-
 .glass-card {
     position: relative;
-    z-index: 2;
-    padding: 2rem;
+    padding: 2rem 3rem;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 1rem;
     box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.3);
     text-align: center;
-    color: #fff;
+    z-index: 1;
 }
 
 h1 {
@@ -66,4 +53,15 @@ a {
 
 a:hover {
     background: #ff3d00;
+}
+
+.glow {
+    position: absolute;
+    width: 200px;
+    height: 200px;
+    background: rgba(255, 87, 34, 0.6);
+    border-radius: 50%;
+    filter: blur(50px);
+    pointer-events: none;
+    transition: transform 0.1s ease;
 }