@media screen and (max-width: 1100px){
    html {
        font-size: 95.5%;
    }

    #PlayerX::after {
        
        width: 15rem;
        
        
    }
    
    
    #PlayerO::after {
   
        width: 15rem;
       
    }

    .container-score{
        gap: 31rem;
    }
}

@media screen and (max-width: 900px){
    
    html {
        font-size: 78.5%;
    }

 
}
@media screen and (max-width: 750px){
    
    html {
        font-size: 65.5%;
    }

    .container-score{
        top: 28rem;
        
    }
 
}

@media screen and (max-width: 600px){
    html {
        font-size: 52.3%;
    }

    .container-score{
        top: 39rem;
        
    }
}

@media screen and (max-width: 500px){
    html {
        font-size: 45.3%;
    }

    .container-score{
        top: 43rem;
        
    }
}

@media screen and (max-width: 460px){
    
    html {
        font-size: 40%;
    }

    .container-score{
        top: 53rem;
        
    }
    
    .content-text p {
    
        font-size: 2rem;
        
    }
    #winnerText {
        font-size:2rem;
    }
}

@media screen and (max-width: 375px){
    html {
        font-size: 32.5%;
    }

    .container-score{
        top: 68rem;
        
    }

    #PlayerX::after {
        
        height: 8rem;
    }    
    #PlayerO::after {
        
        height: 8rem;
    }    
}

@media screen and (max-width: 325px){
    html {
        font-size: 30.5%;
    }

    .container-score{
        top: 73rem;
        
    }

    #PlayerX::after {
        
        height: 10rem;
    }    
    #PlayerO::after {
        
        height: 10rem;
    }    

    .container-score{
        gap: 33rem;
    }
}


/* height*/

@media screen and (max-height: 870px){
    .container-score{
        top: 26rem;
        
    }
}

@media screen and (max-height: 820px){
    .container-score{
        top: 22rem;
        
    }
}
@media screen and (max-height: 530px){
    html {
        font-size: 40%;
    }
    
    .container-score{
        top: 27rem;
        
    }
}