From 389c05e503b69cd4958169d3e3b4e6232bc33fcf Mon Sep 17 00:00:00 2001
From: alaughingpillow <t01319566@gmail.com>
Date: Thu, 12 Dec 2024 10:27:22 +0530
Subject: [PATCH] Update styles.css

gave it a more space looking vibe
---
 styles.css | 262 ++++++++++++++++++++++++++++++++---------------------
 1 file changed, 157 insertions(+), 105 deletions(-)

diff --git a/styles.css b/styles.css
index 0ba19ed..1d93d3b 100644
--- a/styles.css
+++ b/styles.css
@@ -1,35 +1,32 @@
-body {
+* {
+    box-sizing: border-box;
     margin: 0;
     padding: 0;
+}
+
+body {
+    font-family: 'Arial', sans-serif;
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 100vh;
-    background-color: #ecf0f1;
-    font-family: 'Poppins', sans-serif;
-    color: #2c3e50;
-    overflow: hidden;
+    min-height: 100vh;
+    background: linear-gradient(135deg, #000000 0%, #1a237e 100%);
+    color: #ffffff;
 }
 
 #game-container {
     position: relative;
     width: 100%;
     max-width: 800px;
-    height: 600px;
-    background: linear-gradient(to bottom, #a29bfe, #6c5ce7);
+    height: 100vh;
+    max-height: 600px;
+    background: linear-gradient(to bottom, #000000, #0d47a1);
     border-radius: 20px;
     overflow: hidden;
-    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
-    padding: 20px;
-}
-
-#game-area {
-    position: relative;
-    width: 100%;
-    height: 100%;
+    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
 }
 
-#main-menu {
+#main-menu, #game-area {
     position: absolute;
     top: 0;
     left: 0;
@@ -39,70 +36,94 @@ body {
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    background-color: rgba(236, 240, 241, 0.95);
+}
+
+#main-menu {
+    background-color: rgba(0, 0, 0, 0.8);
     z-index: 10;
-    border-radius: 20px;
 }
 
 h1 {
-    font-size: 48px;
-    color: #fff;
+    font-size: 36px;
+    color: #4fc3f7;
     margin-bottom: 20px;
-    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
-    font-family: 'Poppins', sans-serif;
     text-align: center;
+    text-shadow: 0 0 10px #4fc3f7;
+}
+
+.narrative {
+    font-size: 16px;
+    text-align: center;
+    margin-bottom: 20px;
+    max-width: 80%;
+    line-height: 1.5;
 }
 
 button {
-    font-size: 24px;
-    padding: 12px 24px;
-    background-color: #f39c12;
+    font-size: 18px;
+    padding: 10px 20px;
+    background: linear-gradient(45deg, #4fc3f7, #03a9f4);
     color: white;
     border: none;
     border-radius: 50px;
     cursor: pointer;
-    transition: background-color 0.3s, transform 0.1s, box-shadow 0.3s;
-    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    margin: 10px;
 }
 
 button:hover {
-    background-color: #e67e22;
-    transform: translateY(-3px);
-    box-shadow: 0 12px 16px rgba(0, 0, 0, 0.2);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
 }
 
 button:active {
-    transform: translateY(1px);
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    transform: translateY(0);
 }
 
 button:disabled {
-    background-color: #bdc3c7;
+    background: linear-gradient(45deg, #b8b8b8, #d1d1d1);
     cursor: not-allowed;
 }
 
-#restart-button {
-    position: absolute;
-    bottom: 20px;
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: 10;
-    font-size: 22px;
-    padding: 10px 20px;
-    background-color: #27ae60;
-    border-radius: 50px;
+#difficulty-selector {
+    margin: 20px 0;
+    font-size: 16px;
+    color: white;
+}
+
+#difficulty {
+    font-size: 16px;
+    padding: 8px 12px;
+    border-radius: 25px;
+    border: 2px solid rgba(255, 255, 255, 0.5);
+    background-color: rgba(0, 0, 0, 0.3);
+    color: white;
+    outline: none;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+#difficulty:hover, #difficulty:focus {
+    background-color: rgba(255, 255, 255, 0.2);
+    border-color: white;
+}
+
+#difficulty option {
+    background-color: #000000;
+    color: white;
 }
 
-#player1, #player2 {
+.player {
     position: absolute;
-    width: 60px;
-    height: 60px;
-    background: radial-gradient(circle at 30% 30%, #ff9ff3, #f78fb3);
+    width: 50px;
+    height: 50px;
+    background: radial-gradient(circle at 30% 30%, #4fc3f7, #03a9f4);
     border-radius: 50%;
-    bottom: 30px;
+    bottom: 20px;
     transform: translateX(-50%);
-    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
-    transition: all 0.3s ease-in-out;
+    box-shadow: 0 0 20px #4fc3f7;
+    transition: all 0.3s ease;
 }
 
 #player1 {
@@ -124,95 +145,126 @@ button:disabled {
 
 .enemy {
     position: absolute;
-    width: 40px;
-    height: 40px;
-    background: radial-gradient(circle at 30% 30%, #f39c12, #d35400);
+    width: 30px;
+    height: 30px;
+    background: radial-gradient(circle at 30% 30%, #ff5252, #ff1744);
     border-radius: 50%;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    animation: bounce 1s ease-in-out infinite;
+    box-shadow: 0 0 10px #ff5252;
+    transition: all 0.3s ease;
 }
 
-@keyframes bounce {
-    0%, 100% {
-        transform: translateY(0);
-    }
-    50% {
-        transform: translateY(-10px);
-    }
+#score, #coins {
+    position: absolute;
+    top: 10px;
+    font-size: 18px;
+    color: #fff;
+    text-shadow: 0 0 10px #4fc3f7;
+    background-color: rgba(0, 0, 0, 0.5);
+    padding: 5px 10px;
+    border-radius: 15px;
 }
 
 #score {
-    position: absolute;
-    top: 10px;
     left: 10px;
-    font-size: 30px;
-    color: #fff;
-    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
-    font-family: 'Poppins', sans-serif;
 }
 
-#shop-button {
+#coins {
+    right: 10px;
+}
+
+#gamble-button {
     position: absolute;
-    top: 10px;
+    top: 50px;
     right: 10px;
     z-index: 11;
-    font-size: 18px;
+    font-size: 16px;
     padding: 8px 16px;
-    background-color: #8e44ad;
-    border-radius: 50px;
-    transition: background-color 0.3s;
-}
-
-#shop-button:hover {
-    background-color: #9b59b6;
+    background: linear-gradient(45deg, #ffd54f, #ffb300);
 }
 
-#shop-menu {
+.menu {
     display: none;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    background-color: rgba(255, 255, 255, 0.95);
-    padding: 25px;
+    background-color: rgba(0, 0, 0, 0.9);
+    padding: 20px;
     border-radius: 20px;
     z-index: 20;
     width: 80%;
     max-width: 300px;
-    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0 20px rgba(79, 195, 247, 0.5);
 }
 
-.shop-item {
-    margin-bottom: 15px;
-    font-size: 18px;
-    color: #2c3e50;
+.powerup {
+    position: absolute;
+    width: 25px;
+    height: 25px;
+    border-radius: 50%;
+    background: radial-gradient(circle at 30% 30%, #ffd54f, #ffb300);
+    box-shadow: 0 0 10px #ffd54f;
+    animation: pulse 1s infinite alternate;
 }
 
-#coins {
+@keyframes pulse {
+    from { transform: scale(1); }
+    to { transform: scale(1.1); }
+}
+
+#restart-button, #pause-button, #main-menu-button {
     position: absolute;
-    top: 10px;
-    right: 100px;
-    font-size: 30px;
-    color: #f1c40f;
-    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
+    bottom: 20px;
+    z-index: 10;
 }
 
-#gamble-button {
-    background-color: #8e44ad;
-    border-radius: 50px;
-    padding: 12px 20px;
+#restart-button {
+    left: 50%;
+    transform: translateX(-50%);
 }
 
-#gamble-button:hover {
-    background-color: #9b59b6;
+#pause-button {
+    left: 10px;
 }
 
-#gamble-button:disabled {
-    background-color: #d2b4de;
+#main-menu-button {
+    right: 10px;
 }
 
-#coins, #score {
-    font-family: 'Poppins', sans-serif;
-    font-weight: 600;
-    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
+@media (max-width: 768px) {
+    #game-container {
+        border-radius: 0;
+        max-height: none;
+        height: 100vh;
+    }
+
+    h1 {
+        font-size: 28px;
+    }
+
+    button {
+        font-size: 16px;
+        padding: 8px 16px;
+    }
+
+    #gamble-button {
+        font-size: 14px;
+        padding: 6px 12px;
+    }
+
+    .player {
+        width: 40px;
+        height: 40px;
+    }
+
+    .enemy {
+        width: 25px;
+        height: 25px;
+    }
+
+    #score, #coins {
+        font-size: 16px;
+    }
 }
+
+