styles.css

*, *::after, *::before{
    box-sizing: border-box;
}

:root{
   --hue: 200;
   --saturation: 50%;
   --foreground-color: hsl(var(--hue),var(--saturation),75%); 
   --background-color: hsl(var(--hue),var(--saturation),25%);  
}

body{
    margin: 0;
    background-color: var(--background-color);
    overflow: hidden;
}

.paddle{
    --position: 50;
    position: absolute;
    top: calc(var(--position)*1vh);
    transform: translateY(-50%);
    height: 10vh;
    width: 1vh;
    background-color: var(--foreground-color);
}

.paddle.left{
    left: .1vw;
}

.paddle.right{
    right: .1vw;
}

.ball{
    --x: 50;
    --y: 50;
    position: absolute;
    left: calc(var(--x)*1vw);
    top: calc(var(--y)*1vh);
    border-radius: 50%;
    transform: translateY(-50%, -50%);
    height: 2.5vh;
    width: 2.5vh;
    background-color: var(--foreground-color);
}

.ball.hidden{
    display: none;
}

.score{
 display: flex;
 justify-content: center;
 font-weight: bold;
 color: var(--foreground-color);
 font-size: 7.5vh;  
}
/* select all things inside of score */
.score > *{
 flex-grow: 1;
 flex-basis: 0;
 padding: 0 2vh;
 margin:1vh 0;
 opacity:.5;
}

.score > :first-child{
    text-align: right;
    border-right: .5vh  solid var(--foreground-color);
}
#play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: transparent; /* No background */
    border: none; /* No border */
    padding: 20px 40px;
    font-size: 24px;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
    color: var(--foreground-color);
    font-size: 7.5vh; 
}

/* Hide the play button after being clicked */
#play-button.hidden {
    display: none;
}