Update style.css

style.css

@@ -1,102 +1,108 @@
-/* Styling untuk body dan kontainer utama */
-body {
+/* Reset styling untuk memastikan semua elemen berada dalam tampilan yang rapi */
+* {
     margin: 0;
     padding: 0;
-    overflow: hidden;
-    background-color: #0d0d0d;
+    box-sizing: border-box;
+}
+
+/* Menetapkan body agar game terlihat proporsional di semua perangkat */
+body {
+    font-family: 'Arial', sans-serif;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
-    font-family: 'Roboto', sans-serif;
+    background-color: #121212;
 }
 
-/* Game Container */
+/* Kontainer utama game dengan ukuran tetap proporsional */
 .game-container {
-    width: 80%;
-    height: 80%;
+    width: 80vw; /* Lebar 80% dari layar */
+    height: 60vh; /* Tinggi 60% dari layar */
     position: relative;
     background: linear-gradient(45deg, #00b3b3, #cc00cc);
-    border-radius: 15px;
-    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
+    border-radius: 10px;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
+    overflow: hidden;
 }
 
-/* Styling bola */
+/* Styling untuk bola */
 .ball {
     position: absolute;
     width: 30px;
     height: 30px;
     background-color: #ffcc00;
     border-radius: 50%;
-    top: 0;
+    top: 10%;
     left: 50%;
     transform: translateX(-50%);
-    box-shadow: 0px 0px 10px rgba(255, 204, 0, 0.6);
-    transition: transform 0.2s ease;
+    animation: ballAnimation 4s linear infinite;
+}
+
+/* Animasi untuk pergerakan bola */
+@keyframes ballAnimation {
+    0% { top: 10%; }
+    50% { top: 90%; }
+    100% { top: 10%; }
 }
 
-/* Styling platform */
+/* Styling untuk platform */
 .platform {
     position: absolute;
-    bottom: 10px;
-    width: 100px;
-    height: 20px;
+    bottom: 5%;
+    width: 15vw; /* Platform proporsional dengan lebar layar */
+    height: 5vh; /* Platform proporsional dengan tinggi layar */
     background-color: #ff6600;
     border-radius: 5px;
     left: 50%;
     transform: translateX(-50%);
-    box-shadow: 0px 0px 15px rgba(255, 102, 0, 0.6);
-}
-
-/* Styling untuk skor dan nyawa */
-.score-board, .lives {
-    position: absolute;
-    top: 10px;
-    font-size: 1.5em;
-    color: #ffffff;
-    background-color: rgba(0, 0, 0, 0.5);
-    padding: 10px;
-    font-weight: bold;
-    border-radius: 10px;
 }
 
-.score-board {
-    left: 10px;
-}
-
-.lives {
-    right: 10px;
-}
-
-/* Kontrol tombol */
+/* Styling untuk kontrol tombol */
 .controls {
     position: absolute;
     bottom: 20px;
     display: flex;
-    justify-content: center;
-    gap: 20px;
-    width: 100%;
+    justify-content: space-between;
+    width: 80%;
+    padding: 10px;
 }
 
 .controls button {
-    padding: 10px 20px;
-    font-size: 1.5em;
-    background-color: rgba(0, 0, 0, 0.7);
+    font-size: 1.5rem;
+    padding: 10px 15px;
+    background-color: #333;
     color: white;
     border: none;
     border-radius: 5px;
     cursor: pointer;
-    transition: background-color 0.2s ease, transform 0.1s ease;
+    transition: background-color 0.3s;
 }
 
 .controls button:hover {
-    background-color: rgba(0, 0, 0, 0.9);
-    transform: scale(1.1);
+    background-color: #555;
 }
 
-/* Styling untuk pesan Game Over */
+/* Styling untuk skor dan nyawa */
+.score-board, .lives {
+    position: absolute;
+    top: 10px;
+    font-size: 1.2rem;
+    color: white;
+    font-weight: bold;
+}
+
+.score-board {
+    left: 10px;
+}
+
+.lives {
+    right: 10px;
+}
+
+/* Game Over message */
 .game-over-message {
-    position: fixed;
+    position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
@@ -105,49 +111,28 @@ body {
     text-align: center;
     padding: 30px;
     border-radius: 15px;
-    display: none; /* Sembunyikan Game Over saat permainan berlangsung */
-    width: 60%;
-    box-shadow: 0px 0px 30px rgba(0, 255, 255, 0.7);
+    display: none; /* Hidden by default */
+    box-shadow: 0 0 30px rgba(0, 255, 255, 0.7);
 }
 
 .game-over-message h2 {
-    font-size: 2.5em;
-    margin-bottom: 10px;
-    text-transform: uppercase;
-    color: #00b3b3;
-    font-weight: 700;
+    font-size: 2rem;
 }
 
 .game-over-message p {
-    font-size: 1.5em;
-    margin-bottom: 20px;
+    font-size: 1.5rem;
 }
 
 .game-over-message button {
+    padding: 12px 25px;
     background-color: #ff6600;
     color: white;
-    border: none;
-    padding: 12px 25px;
-    font-size: 1.6em;
+    font-size: 1.2rem;
     border-radius: 10px;
     cursor: pointer;
-    transition: background-color 0.3s ease, transform 0.1s ease;
+    transition: background-color 0.2s ease;
 }
 
 .game-over-message button:hover {
     background-color: #e64a19;
-    transform: scale(1.1);
-}
-
-/* Styling untuk timer */
-.timer {
-    position: absolute;
-    top: 50px;
-    right: 10px;
-    font-size: 1.5em;
-    color: white;
-    background-color: rgba(0, 0, 0, 0.5);
-    padding: 10px;
-    font-weight: bold;
-    border-radius: 10px;
 }