*::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),20%);
}
body{
    margin:0;
    background-color: var(--background-color);
} 
.container{
    background-color: black;
    height:100vh;
    width:100vw;
}  
.paddle{
    --position:50;
    position:fixed;
    background-color: white;
    top: calc(var(--position)* 1vh);
    transform:translateY(-50%);
    width: 1vw; 
    height:10vh;
    z-index: 11;
    
}
.left{
    left:1.5vw;
}
.right{
    right:1.5vw;
}
.ball{
    --x:50;
    --y:50;
    position: absolute;
    left:calc(var(--x)*1vw);
    top:calc(var(--y)*1vh);
    width:3vh;
    height:3vh;
    background-color: white;
    border-radius: 50%;
    transform:translate(-50%,-50%);
    z-index: 11;
}
.score{
    display: flex;
    flex-grow: 1;
    flex-basis: 0;
    justify-content: center;
    font-weight: bold;
    font-size: 7vh;
    top:2vh;
    color: var(--foreground-color);
}
.score > div{
    flex-basis:0;
    flex-grow:1;
    padding:0 2vh;
    margin:1vh 0;
    opacity:0.5;
}
.score >:first-child{
    text-align: right;
    border-right: .5vh solid var(--foreground-color);
}
.score >:nth-child(2){
    text-align:left;
    border-left: .5vh solid var(--foreground-color);
}
.hline{
    position:fixed;
    background-color: rgba(255,0,0,.3);
    height:100%;
    width:2px;
    left:50vw;
    transform:translateX(-50%);
    z-index: 10;
}
.vline{
    position:fixed;
    background-color: rgba(255,0,0,.3);
    height:2px;
    width:100%;
    top:50vh;
    transform: translateY(-50%);
    z-index: 10;
}
.game_over{
    position:fixed;
    height:50vh;
    width:50vw;
    left:50vw;
    top:30vh;
    border:3px solid red;
    transform:translate(-50%,-50%);
    z-index: 13;
    background-color: rgb(0,0,0,0.3);
    color:red;
    text-align: center;
    align-content: center;
    font-size: 3rem;
    display: inline-block;
    box-shadow: 5px black;
    border-radius:10px;
}
.game_start{
    position:fixed;
    height:50vh;
    width:50vw;
    left:50vw;
    top:30vh;
    border:3px solid red;
    transform:translate(-50%,-50%);
    z-index: 13;
    background-color: rgb(0,0,0,0.3);
    color:white;
    text-align: center;
    align-content: center;
    font-size: 2.5rem;
    display: inline-block;
    box-shadow: 5px black;
    border-radius:20px;
}
.bonus{
    --x:50;
    display: inline-block;
    position:fixed;
    left:calc(var(--x)*1vw);
    top:50vh;
    height:3rem;
    width:3rem;
    background-color: rgba(255,255,200,.2);
    transform: translate(-50%,-50%);
    border-radius: 50%;
    z-index: 15;
    text-align: center;
    align-content: center;
}
@media only screen and (max-width:850px){
    .game_over{
        font-size: 2rem;
        height:50vh;
    }
} 
@media only screen and (max-width:320px){
    .game_over{
        font-size: 1rem;
        height:50vh;
    }
} 
@media only screen and (max-height:450px){
    .paddle{
        width: 1vw; 
        height:15vh;
    }
}