Create style.css

style.css

@@ -0,0 +1,132 @@
+/* General Body Styling */
+body {
+    margin: 0;
+    padding: 0;
+    background: linear-gradient(90deg, #000428, #004e92);
+    font-family: Arial, sans-serif;
+    overflow: hidden;
+}
+
+/* Game Container */
+.game-container {
+    position: relative;
+    width: 100vw;
+    height: 80vh; /* Reduced height for controls */
+    border: 3px solid #00ffcc;
+    overflow: hidden;
+    box-shadow: 0 0 20px #00ffcc;
+}
+
+/* Ball */
+.ball {
+    position: absolute;
+    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%);
+}
+
+/* Platform */
+.platform {
+    position: absolute;
+    bottom: 5%;
+    left: 50%;
+    width: 100px;
+    height: 20px;
+    background: linear-gradient(90deg, #00ffcc, #0066ff);
+    border-radius: 10px;
+    box-shadow: 0 0 20px #00ffcc;
+    transform: translateX(-50%);
+}
+
+/* Score Board */
+.score-board {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    font-size: 1.5em;
+    color: #ffffff;
+    background: rgba(0, 0, 0, 0.5);
+    padding: 10px 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px #00ffcc;
+}
+
+/* Controls */
+.controls {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+    margin-top: 10px;
+}
+
+.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;
+    cursor: pointer;
+    outline: none;
+    transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.controls button:hover {
+    transform: scale(1.1);
+    box-shadow: 0 0 15px #ffcc00;
+}
+
+/* Game Over Overlay */
+.overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.7);
+    display: none;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    font-size: 2em;
+    text-align: center;
+}
+
+.overlay-content {
+    background: rgba(0, 0, 0, 0.9);
+    padding: 20px;
+    border-radius: 15px;
+    box-shadow: 0 0 20px #ff0066;
+}
+
+.overlay h2 {
+    font-size: 2em;
+}
+
+.overlay p {
+    font-size: 1.5em;
+    margin: 20px 0;
+}
+
+.overlay button {
+    background: linear-gradient(90deg, #00ffcc, #0066ff);
+    color: white;
+    border: none;
+    border-radius: 10px;
+    padding: 10px 20px;
+    font-size: 1.5em;
+    cursor: pointer;
+    outline: none;
+    box-shadow: 0 0 10px #00ffcc;
+}
+
+.overlay button:hover {
+    transform: scale(1.1);
+    box-shadow: 0