*{
    margin: 0;
    padding: 0;
}
body{
    background-color: cadetblue;
    color: white;
}
.container{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    }
    .container h1 {
        margin-top: 40px;
        margin-bottom: 5px;
        text-decoration: underline;
        color: rgb(34, 34, 54);
    }
    .game-board{
        
        display: grid;
        grid-template-columns: repeat(3,minmax(100px,1fr));
        
    }
    .cell{
        margin: 20 0 30 0;
        border: 2px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 25px;
    font-size: 40px;
    font-weight: 600;
    height: 50px;
    cursor: pointer;
    background-color: rgb(62, 142, 135);
}
.cell:first-child,.cell:nth-child(2),.cell:nth-child(3){
    border-top: none;
    }
    .cell:nth-child(3),.cell:nth-child(6),.cell:nth-child(9){
        border-right: none;
        }

        .cell:nth-child(7),.cell:nth-child(8),.cell:nth-child(9){
            border-bottom: none;
            }
            .cell:nth-child(1),.cell:nth-child(4),.cell:nth-child(7){
                border-left: none;
                }
                .game-Player{
                   display: flex;
                   justify-content: space-between;
                   margin: 30px;
                }
                .player1{
                  margin-inline: 40px;
                  font-size: 30px;
                  font-weight: 600;
                  
                }
                .player2{
                    margin-inline: 40px;
                    font-size: 30px;
                    font-weight: 600;
                    
                  }
                .restart{
                    background-color: rgb(89, 125, 125);
                    padding: 20px;
                    cursor: pointer;
                    border: none;
                    color: white;
                    font-size: 40px;
                    font-weight: 600;
                    border-radius: 20px;
                }
                .cell:hover{
                    background-color: rgb(97, 105, 105);
                }
                .restart:hover{
                    background-color: rgb(170, 168, 165);
                }

                .cell.disabled{
                    background-color: rgb(121, 128, 128);
                }
                .alertBox{
                   position: absolute;
                    top: 0;
                    
                    color: rgb(30, 69, 69);
                    width: 100%;
                    padding: 8px 12px;
                    font-size: 20px;
                    font-weight: 600;
                   
                    margin-top: 40px;
                    margin-bottom: 40px;
                    display: none;
                    
                }
                @media screen and (max-width:550px){
                    grid-template-columns: repeat(3,minmax(90px,1fr));
                    .cell{
                        height: 90px;

                    }
                }