Hugging Face's logo

Spaces:
Gregniuki
/
Pingpong
Running

App Files Community
Pingpong / styles.css
Gregniuki's picture
Gregniuki
Update styles.css
698ed3b verified
Raw History Blame Contribute Delete
1.68 kB
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #000;
overflow: hidden;
font-family: Arial, sans-serif;
}
#scoreboard {
position: absolute;
top: 20px; /* Position at the top */
left: 50%;
transform: translateX(-50%);
color: #fff;
font-size: 24px;
display: flex;
gap: 40px; /* Space between player and bot scores */
z-index: 10; /* Ensure it's above the game area */
}
#gameArea {
position: relative;
width: 100vw;
height: 100vh;
background-color: #333;
}
.paddle {
position: absolute;
width: 10px;
height: 80px;
background-color: #fff;
}
#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: #fff;
border-radius: 50%;
top: background-color: #fff;
}
#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: #fff;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} 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%);
}