style.css

*{
    margin:0;
    padding : 0;
}
html{
    font-family: monospace;
}
.text-center{
    text-align: center;
}
.gameBoard {
    width: 600px;
    margin : 3rem 0;
    display: grid;
    grid-template-columns: repeat(3 , 1fr);
    grid-auto-rows: 100px;
}
.one , .two , .three , .four , .five , .six {
    border-bottom: 4px solid black;
}
.one , .two , .four , .five  , .seven , .eight{
    border-right: 4px solid black;
}
.three , .six {
    border-bottom : 4px solid black ;
} 
.gameMenu {
    margin-top:50px;
    position: relative;
}
.gameMenu h3{
    line-height: 24px;
}
.gameMenu button {
    margin-top : 1.5rem;
    color : white;
    background-color: #04AA6D;
    border : 3px solid #04AA6D;
    border-radius: 6px;
    padding : 0.5rem 0.75rem;
    cursor: pointer;
}
.gameMenu button:hover {
    margin-top : 1.5rem;
    color : #04AA6D ;
    background-color: white;
    border : 3px solid #04AA6D;
    border-radius: 6px;
    padding : 0.5rem 0.75rem;
    cursor: pointer;
}

.area{
    display: flex;
    justify-content: center;
    align-items: center;
}
.area span {
    font-size: 50px;
}
.info {
    position : absolute ;
    top : -200px;
    left :450px;
    margin : 0 auto;
    width:150px; background-color:#fff;  
    border :3px solid grey;
    border-left:6px solid #04aa6d ;
    border-radius : 5px;
    padding : 0.25rem 0.75rem;
    animation-name: info;
    animation-duration: .8s;
    animation-timing-function: cubic-bezier(0.075, 0.82, 0.3, 1);
    animation-iteration-count: 2;
    animation-direction: alternate ;
    }

    @keyframes info {
    0%{ top: -200px;
    }
    100%{
        top : 0px;
    }
}

.container{
    max-width: 1200px;
    margin : 0 auto;
}

footer {
    position : fixed;
    bottom : 10px ;
    right : 10px;
}