Update styles.css

styles.css

@@ -9,20 +9,23 @@ body {
   justify-content: center;
   align-items: center;
   height: 100vh;
+  overflow: hidden;
 }
 
 /* Container styling */
 .container {
   width: 90%;
-  max-width: 600px;
+  aspect-ratio: 16 / 9; /* Ensures a 16:9 ratio */
+  max-width: 800px;
   display: flex;
   flex-direction: column;
   align-items: center;
   background: #2c2c2c;
   border: 2px solid #444;
-  border-radius: 10px;
+  border-radius: 15px;
   padding: 20px;
-  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.6);
+  animation: fadeIn 1s ease-out;
 }
 
 /* Header styling */
@@ -35,8 +38,9 @@ header {
 }
 
 header h1 {
-  font-size: 24px;
+  font-size: 28px;
   color: #e63946; /* Red title */
+  animation: slideInLeft 0.5s ease-out;
 }
 
 header .balance-display {
@@ -51,18 +55,19 @@ header .balance-display {
   border-radius: 5px;
   cursor: pointer;
   font-size: 16px;
-  transition: background 0.3s ease;
+  transition: background 0.3s ease, transform 0.3s ease;
 }
 
 #back-btn:hover {
   background: #a62639;
+  transform: scale(1.1);
 }
 
 /* Game screen styling */
 .game-screen {
   position: relative;
   width: 100%;
-  height: 300px;
+  flex-grow: 1;
   border: 2px solid #e63946;
   border-radius: 10px;
   overflow: hidden;
@@ -70,6 +75,7 @@ header .balance-display {
   display: flex;
   align-items: flex-end;
   justify-content: flex-start;
+  animation: slideInUp 1s ease-out;
 }
 
 .sky-video {
@@ -80,6 +86,7 @@ header .balance-display {
   height: 100%;
   object-fit: cover;
   z-index: -1;
+  filter: brightness(0.8);
 }
 
 .plane {
@@ -88,7 +95,11 @@ header .balance-display {
   left: 10px;
   width: 60px;
   height: auto;
-  transition: transform 0.1s ease-in-out;
+  transition: transform 0.3s ease-in-out, left 0.3s ease-in-out;
+}
+
+.plane:hover {
+  transform: scale(1.2);
 }
 
 .multiplier {
@@ -108,17 +119,18 @@ header .balance-display {
   display: flex;
   flex-direction: column;
   align-items: center;
+  gap: 10px;
 }
 
 .controls input {
   width: 80%;
   padding: 10px;
-  margin-bottom: 10px;
   border: 2px solid #e63946;
   border-radius: 5px;
   background: #202124;
   color: #ffffff;
   font-size: 16px;
+  animation: fadeIn 0.8s ease-out;
 }
 
 .buttons-group {
@@ -135,7 +147,7 @@ header .balance-display {
   border-radius: 5px;
   font-size: 16px;
   cursor: pointer;
-  transition: background 0.3s ease;
+  transition: background 0.3s ease, transform 0.3s ease;
 }
 
 .controls #stake-btn {
@@ -155,6 +167,35 @@ header .balance-display {
 
 .controls button:hover:not(:disabled) {
   background: #a62639;
+  transform: translateY(-5px);
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideInLeft {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInUp {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
 }
 
 /* Responsive design */
@@ -164,8 +205,12 @@ header .balance-display {
     padding: 10px;
   }
 
+  header h1 {
+    font-size: 20px;
+  }
+
   .controls input,
   .controls button {
     width: 100%;
   }
-}
+}