|
|
|
body { |
|
margin: 0; |
|
padding: 0; |
|
background: linear-gradient(90deg, #000428, #004e92); |
|
font-family: Arial, sans-serif; |
|
overflow: hidden; |
|
} |
|
|
|
|
|
.game-container { |
|
position: relative; |
|
width: 100vw; |
|
height: 80vh; |
|
border: 3px solid #00ffcc; |
|
overflow: hidden; |
|
box-shadow: 0 0 20px #00ffcc; |
|
} |
|
|
|
|
|
.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 { |
|
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 { |
|
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 { |
|
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; |
|
} |