*{
    margin: 0 ;
    padding:0;
}

body{
    background-color: #ef737b;
    text-align:center;
}
h1{
    font-size:60px;

}
.container{
    height:70vh;
    display:flex;
    justify-content:center;
align-items:center;

}
.game{
    height: 60vmin;
    width: 60vmin;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
align-items:center;
gap:1vmin;

}
.box{
    height:18vmin;
    width:18vmin;
    border-radius:1rem;
    box-shadow: 0 0 1rem rgba(0,0,0 ,5 );
    font-size:8vmin;
    color:#780dc5;
    background-color:rgb(169, 172, 172);

}

#reset-btn{
    padding:1rem;
    font-size:2rem;
    background-color:#09bc3f ;
    color:rgb(209, 233, 59);
    border-radius:1rem;
    
}
#new-btn{
    padding:1rem;
    font-size:1.2rem;
    background-color:#09bc3f ;
    color:rgb(209, 233, 59);
    border-radius:1rem;
    margin:10px auto;
    position:static;
    display:block;
    cursor:pointer;
}

#msg{
    color:rgb(215, 244, 158);
    font-size : 8vmin;
}
.msg-container{
    height: auto;
    min-height:20vh;

display : flex;
justify-content:center;
align-items:center;
flex-direction:column;
gap:2rem;
padding-top:20px;
}
.hide{
    display:none;
}
.colorX{
    color:#e2f598;
    text-shadow: 0px 5px 2px#111809;
}
.colorO{
    color:#847221;
    text-shadow: 0px 5px 2px#000;
    
}