Update styles.css

styles.css

@@ -9,20 +9,21 @@ body {
   justify-content: center;
   align-items: center;
   height: 100vh;
+  overflow: hidden;
 }
 
 /* Container styling */
 .container {
-  width: 90%;
-  max-width: 800px;
+  width: 95%;
+  max-width: 600px;
   display: flex;
   flex-direction: column;
   align-items: center;
   background: #2c2c2c;
   border: 2px solid #444;
-  border-radius: 10px;
-  padding: 20px;
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
+  border-radius: 15px;
+  padding: 15px;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
   animation: fadeIn 0.6s ease-in-out;
 }
 
@@ -43,12 +44,13 @@ header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 20px;
+  margin-bottom: 15px;
 }
 
 header h1 {
-  font-size: 28px;
+  font-size: 24px;
   color: #e63946;
+  text-align: center;
   animation: bounce 1.5s infinite;
 }
 
@@ -62,17 +64,18 @@ header h1 {
 }
 
 header .balance-display {
-  font-size: 16px;
+  font-size: 14px;
 }
 
+/* Button styling */
 #back-btn {
   background: #e63946;
   color: #ffffff;
-  padding: 10px 20px;
+  padding: 8px 15px;
   border: none;
   border-radius: 5px;
+  font-size: 14px;
   cursor: pointer;
-  font-size: 16px;
   transition: background 0.3s ease, transform 0.2s ease;
 }
 
@@ -89,11 +92,11 @@ header .balance-display {
   border: 2px solid #e63946;
   border-radius: 10px;
   overflow: hidden;
-  margin-bottom: 20px;
+  margin-bottom: 15px;
   display: flex;
   align-items: flex-end;
   justify-content: flex-start;
-  background: #ff0000; /* Debugging color to check visibility */
+  background: #3a3a3a;
 }
 
 /* Sky image styling */
@@ -103,16 +106,16 @@ header .balance-display {
   left: 0;
   width: 100%;
   height: 100%;
-  object-fit: cover; /* Ensures the image covers the container */
-  z-index: 0; /* Places the image behind other elements */
+  object-fit: cover;
+  z-index: 0;
 }
 
 /* Adjusted plane position */
 .plane {
   position: absolute;
-  bottom: 30px; /* Moved up slightly from the bottom */
+  bottom: 20px;
   left: 10px;
-  width: 60px;
+  width: 50px;
   height: auto;
   transition: transform 0.2s ease-in-out, left 0.4s ease-in-out;
 }
@@ -121,15 +124,16 @@ header .balance-display {
   transform: scale(1.1);
 }
 
+/* Multiplier styling */
 .multiplier {
   position: absolute;
-  top: 10px;
-  left: 10px;
+  top: 5px;
+  left: 5px;
   background: rgba(0, 0, 0, 0.7);
   color: #ffffff;
-  padding: 5px 10px;
-  border-radius: 5px;
-  font-size: 18px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  font-size: 14px;
   animation: pulse 1.5s infinite;
 }
 
@@ -148,17 +152,17 @@ header .balance-display {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 10px;
+  gap: 12px;
 }
 
 .controls input {
-  width: 80%;
+  width: 90%;
   padding: 10px;
   border: 2px solid #e63946;
-  border-radius: 5px;
+  border-radius: 8px;
   background: #202124;
   color: #ffffff;
-  font-size: 16px;
+  font-size: 14px;
   transition: box-shadow 0.3s ease;
 }
 
@@ -169,17 +173,17 @@ header .balance-display {
 
 .buttons-group {
   display: flex;
-  gap: 10px;
+  gap: 8px;
   width: 100%;
   justify-content: center;
 }
 
 .controls button {
   flex: 1;
-  padding: 10px;
+  padding: 8px;
   border: none;
-  border-radius: 5px;
-  font-size: 16px;
+  border-radius: 8px;
+  font-size: 14px;
   cursor: pointer;
   transition: background 0.3s ease, transform 0.2s ease;
 }
@@ -205,14 +209,28 @@ header .balance-display {
 }
 
 /* Responsive design */
-@media (max-width: 600px) {
+@media (max-width: 480px) {
+  header h1 {
+    font-size: 20px;
+  }
+
   .container {
-    width: 100%;
-    padding: 10px;
+    padding: 12px;
+    border-radius: 10px;
+  }
+
+  .controls input {
+    font-size: 12px;
+    padding: 8px;
   }
 
-  .controls input,
   .controls button {
-    width: 100%;
+    font-size: 12px;
+    padding: 6px;
+  }
+
+  .multiplier {
+    font-size: 12px;
+    padding: 6px 10px;
   }
 }