* { | |
margin: 0; | |
padding: 0; | |
box-sizing: border-box; | |
} | |
body { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
height: 100vh; | |
background-color: #0f0; | |
overflow: hidden; | |
} | |
#gameArea { | |
position: relative; | |
width: 100vw; | |
height: 100vh; | |
background-color: #333; | |
} | |
.paddle { | |
position: absolute; | |
width: 10px; | |
height: 80px; | |
background-color: #f0f; | |
} | |
#paddleLeft { | |
left: 10px; | |
top: 50%; | |
transform: translateY(-50%); | |
} | |
#paddleRight { | |
right: 10px; | |
top: 50%; | |
transform: translateY(-50%); | |
} | |
#ball { | |
position: absolute; | |
width: 15px; | |
height: 15px; | |
background-color: #0ff; | |
border-radius: 50%; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
} |