Update style.css

style.css

@@ -12,10 +12,10 @@ body, html {
     display: flex;
     justify-content: center;
     align-items: center;
-    background: linear-gradient(45deg, #2a2a72, #009ffd);
+    background: #1a1a1a; /* Dark background to enhance futuristic feel */
 }
 
-/* Futuristic Background with moving particles effect */
+/* Futuristic Background with subtle movement */
 .game-container {
     position: relative;
     width: 80vw;
@@ -37,76 +37,16 @@ body, html {
     left: 0;
     width: 100%;
     height: 100%;
-    background: url('https://www.transparenttextures.com/patterns/3px-ninesquare.png');
-    background-size: cover;
-    opacity: 0.2;
+    background: linear-gradient(45deg, rgba(2, 0, 36, 1) 0%, rgba(9, 121, 69, 1) 100%);
+    opacity: 0.5;
     z-index: -1;
+    animation: gradientShift 5s ease infinite;
 }
 
-/* Ball Styling */
-.ball {
-    position: absolute;
-    width: 30px;
-    height: 30px;
-    background-color: #ff6f61;
-    border-radius: 50%;
-    animation: fall 3s linear infinite;
-}
-
-/* Platform Styling */
-.platform {
-    position: absolute;
-    width: 100px;
-    height: 20px;
-    background-color: #00bcd4;
-    border-radius: 5px;
-    bottom: 0;
-}
-
-/* Score and Level Display */
-#score, #level {
-    color: #fff;
-    font-size: 24px;
-    margin-bottom: 10px;
-    z-index: 2;
-}
-
-/* Lives Icons */
-#lives {
-    position: absolute;
-    bottom: 30px;
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    z-index: 2;
-}
-
-.life {
-    width: 40px;
-    height: 40px;
-}
-
-/* Animations for falling ball */
-@keyframes fall {
+/* Keyframes for shifting gradient background */
+@keyframes gradientShift {
     0% {
-        transform: translateY(0);
+        background: linear-gradient(45deg, rgba(2, 0, 36, 1) 0%, rgba(9, 121, 69, 1) 100%);
     }
-    100% {
-        transform: translateY(100vh);
-    }
-}
-
-/* Background particles animation */
-@keyframes particlesMovement {
-    0% {
-        transform: translateY(0) translateX(0);
-    }
-    100% {
-        transform: translateY(100vh) translateX(100vw);
-    }
-}
-
-/* Add subtle movement effect */
-body {
-    animation: particlesMovement 10s infinite linear;
-}
+    50% {
+        background: linear-gradient(45deg, rgba(0, 36, 72, 1) 0%, rgba(8, 69, 121,