*{
    padding:0;
    margin:0;
}
body{
    background-color: #2e86c1;
}
.header{
    background-color:#2c3e50;
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:center;
    height:100px;
    color:white;
}
.choices-container,.msg-container,.btn-container{
    margin-top:5rem;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5rem;
    
}
.msg-container{
    margin-top:3rem;
}
.choice,img{
    height:200px;
    width:200px;
    border-radius:50%;
}
img{
    object-fit:cover;
}
.choice:hover{
    transform:scale(1.1);
    transition:0.2s ease-in-out;
    box-shadow:0 0 10px rgba(0,0,0,0.2);
    cursor:pointer;
}
.reset-btn:hover{
    opacity:0.9;
    cursor:pointer;
    border:0.5px solid  black;
}
.score{
    animation:pop 0.3s ease;
}
@keyframes pop{
    0%{transform:scale(1);}
    50%{transform:scale(1.3);}
    100%{transform:scale(1);}
}
#user,#comp{
    display:flex;
    justify-content:center;
    flex-direction:column;
    align-items:center;
    font-size:1rem;
    font-weight:600;
}
.userNo,.compNo{
    font-size:4rem;
    align-items:center;
    font-weight:700;
}
#msg-container{
    margin-top:5rem;
    display:flex;
    justify-content:center;
    color:white;
    font-size:2rem;
    
}
.msg{
    background-color:#34495e;
    padding:1rem;
    border-radius:1rem;
}
.msg-BgGreen{
    background-color:green;
}
.msg-BgRed{
    background-color:Red;
}
.btn-container{
margin-top:1rem;
}
.reset-btn{
    font-size:1rem;
    padding:10px 20px;
    border-radius:1rem;
    color:white;
    background-color:black;
    border: 0.5px solid transparent;
    position:fixed;
    bottom:10px;
    right:10px;

}
@media (max-width:768px){
    .choices-container{
      gap:2rem;  
    }
    .choice,img{
    height:150px;
    width:150px;
    }
}
@media (max-width:650px){
    .choices-container{
        gap:1.5rem;
    }
    .choice,img{
    height:130px;
    width:130px;
    }
    #msg-container{
    font-size:1.5rem;
    }
}

@media (max-width:415px){
    .choice,img{
    height:85px;
    width:85px;
    }
    #msg-container{
    font-size:1rem;
    }
    .choices-container{
      gap:1rem;  
    }
}