Update style.css

style.css

@@ -1,84 +1,153 @@
-/* General Body Styling */
+/* Styling untuk body dan kontainer utama */
 body {
     margin: 0;
     padding: 0;
-    background: linear-gradient(90deg, #000428, #004e92);
-    font-family: Arial, sans-serif;
     overflow: hidden;
+    background-color: #0d0d0d;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    font-family: 'Roboto', sans-serif;
 }
 
 /* Game Container */
 .game-container {
+    width: 80%;
+    height: 80%;
     position: relative;
-    width: 100vw;
-    height: 80vh; /* Reduced height for controls */
-    border: 3px solid #00ffcc;
-    overflow: hidden;
-    box-shadow: 0 0 20px #00ffcc;
+    background: linear-gradient(45deg, #00b3b3, #cc00cc);
+    border-radius: 15px;
+    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
 }
 
-/* Ball */
+/* Styling bola */
 .ball {
     position: absolute;
+    width: 30px;
+    height: 30px;
+    background-color: #ffcc00;
+    border-radius: 50%;
     top: 0;
     left: 50%;
-    width: 20px;
-    height: 20px;
-    background: radial-gradient(circle, #ff00cc, #ff0066);
-    border-radius: 50%;
-    box-shadow: 0 0 15px #ff0066;
-    transform: translate(-50%, -50%);
+    transform: translateX(-50%);
+    box-shadow: 0px 0px 10px rgba(255, 204, 0, 0.6);
+    transition: transform 0.2s ease;
 }
 
-/* Platform */
+/* Styling platform */
 .platform {
     position: absolute;
-    bottom: 5%;
-    left: 50%;
+    bottom: 10px;
     width: 100px;
     height: 20px;
-    background: linear-gradient(90deg, #00ffcc, #0066ff);
-    border-radius: 10px;
-    box-shadow: 0 0 20px #00ffcc;
+    background-color: #ff6600;
+    border-radius: 5px;
+    left: 50%;
     transform: translateX(-50%);
+    box-shadow: 0px 0px 15px rgba(255, 102, 0, 0.6);
 }
 
-/* Score Board */
-.score-board {
+/* Styling untuk skor dan nyawa */
+.score-board, .lives {
     position: absolute;
     top: 10px;
-    left: 10px;
     font-size: 1.5em;
     color: #ffffff;
-    background: rgba(0, 0, 0, 0.5);
-    padding: 10px 20px;
+    background-color: rgba(0, 0, 0, 0.5);
+    padding: 10px;
+    font-weight: bold;
     border-radius: 10px;
-    box-shadow: 0 0 10px #00ffcc;
 }
 
-/* Controls */
+.score-board {
+    left: 10px;
+}
+
+.lives {
+    right: 10px;
+}
+
+/* Kontrol tombol */
 .controls {
+    position: absolute;
+    bottom: 20px;
     display: flex;
     justify-content: center;
-    align-items: center;
     gap: 20px;
-    margin-top: 10px;
+    width: 100%;
 }
 
 .controls button {
-    background: linear-gradient(90deg, #ff0066, #ffcc00);
-    color: white;
-    border: none;
-    border-radius: 10px;
     padding: 10px 20px;
     font-size: 1.5em;
-    box-shadow: 0 0 10px #ff0066;
+    background-color: rgba(0, 0, 0, 0.7);
+    color: white;
+    border: none;
+    border-radius: 5px;
     cursor: pointer;
-    outline: none;
-    transition: transform 0.2s, box-shadow 0.2s;
+    transition: background-color 0.2s ease, transform 0.1s ease;
 }
 
 .controls button:hover {
+    background-color: rgba(0, 0, 0, 0.9);
+    transform: scale(1.1);
+}
+
+/* Styling untuk pesan Game Over */
+.game-over-message {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: rgba(0, 0, 0, 0.8);
+    color: white;
+    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);
+}
+
+.game-over-message h2 {
+    font-size: 2.5em;
+    margin-bottom: 10px;
+    text-transform: uppercase;
+    color: #00b3b3;
+    font-weight: 700;
+}
+
+.game-over-message p {
+    font-size: 1.5em;
+    margin-bottom: 20px;
+}
+
+.game-over-message button {
+    background-color: #ff6600;
+    color: white;
+    border: none;
+    padding: 12px 25px;
+    font-size: 1.6em;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.1s ease;
+}
+
+.game-over-message button:hover {
+    background-color: #e64a19;
     transform: scale(1.1);
-    box-shadow: 0 0 15px #ffcc00;
+}
+
+/* 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;
 }