*{
    margin: 0;
    padding: 0;
}
body{
   background-image: url('https://media.istockphoto.com/id/2222916456/photo/wooden-tic-tac-toe-game-with-x-and-o-pieces-on-table-symbolizing-strategy-games-and.jpg?s=612x612&w=0&k=20&c=NY2WQL3tER3-SULvDOuvTM-HPWMh1-hz3BiEDXpaZkQ=');
    text-align: center;
      background-size: cover;        /* poore element ko cover kare */
  background-position: center;   /* image center me rahe */
  background-repeat: no-repeat; 
  height: 900px;
}
.container {
    height: 80vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
   
}
.game{
    height: 60vmin;
    width: 60vmin;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.5vmin;
}
.box{
    height: 18vmin;
    width: 18vmin;
    border: none;
    border-radius: 1rem;
    box-shadow: 0 0 1rem black;
    font-size: 4vmin;
    font-style: normal;
    color:black;
    background-color:rgb(235, 246, 248);
}
#reset-btn
{
    padding: 1rem;
    font-size: 1.25rem;
    background-color:rgb(209, 219, 238);
    color: black;
    border-radius: 1rem;
    border: none;
    box-shadow: 0 0 1rem rgb(100, 98, 110);

}
#new-btn{
    padding: 1rem;
    font-size: 1.25rem;
    background-color:rgb(173, 184, 205);
    color: black;
    border-radius: 1rem;
    border: none;
    box-shadow: 0 0 1rem rgb(100, 98, 110);
    

    
}
#msg
{
    font-size: 4rem;
    color: black;
}
.msg-container{
    height: 100vmin;
    gap:2vmin;
    flex-direction: column;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4vmin;
}
.hide
{
    display: none;
}