/* 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; }