*{
    margin:0; 
    padding:0; 
   
}


main{ 
    display:flex; 
    flex-direction:column; 
    align-items:center; 
    padding-top:100px;

}

.pingPong{
   
    box-shadow:1px 1px  5px black;
    display:flex; 
    flex-direction:column; 
    align-items:center; 
    padding-bottom:20px;
    margin-bottom:5px;
}  

.pingPong p{
    font-weight: bold; 
    font-size:20px; 
    background-color:white;  
    margin-top:10px; 
    
}

img{
     max-width:660px;  
     width:100%;
     height:330px;
} 

.keepingScores{
    max-width:660px; 
    width:100%; 
    box-shadow:1px 1px 5px black;
    padding-left:30px; 
    box-sizing:border-box; 
    opacity:0.85; 
    padding-bottom:10px; 
    padding-right:10px;
}
.scores{
    display:flex; 
    flex-direction:row;
} 

.scores h1{
    margin-right:12px; 
    font-size:50px;  
    margin-bottom:8px;
   
} 

.keepingScores p{ 
    font-size:20px; 
    margin-bottom:15px;

}   

.keepingScores span{
    font-weight:bold; 
    font-size:25px;
}

select{
    margin-bottom:30px;  
    margin-left:5px;
    cursor:pointer; 
    width:50px; 

}

.buttons{
    display:flex; 

}

button{
   flex-grow:1; 
   padding:15px 0px; 
   margin-right:1px; 
   cursor:pointer;  
   font-size:20px; 
   color:white; 
   outline:none;
   border:none;
}  

button:nth-of-type(1){
    background-color:rgb(4, 196, 132);
}  

button:nth-of-type(1):hover{
    background-color:rgb(5, 141, 96);
}



button:nth-of-type(2){
    background-color:rgb(5, 161, 172);
} 

button:nth-of-type(2):hover{
    background-color:rgb(3, 119, 128);
}

button:nth-of-type(3){
    background-color:rgb(206, 25, 25)
} 

button:nth-of-type(3):hover{
    
    background-color:rgb(146, 15, 15)
}   

.buttonOneTwo{
    opacity:0.5;
}

@media(max-width:550px){
    img{
        height:50%;
    }
}