@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaina+2&family=Roboto:wght@300&display=swap');

*
{
    margin: 0;
    padding: 0;
}
nav
{
    background-color: #3f1e41;
    color: white;
    height: 65px;
    font-size: 27px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-family: 'Roboto', sans-serif;
}
nav ul
{
    list-style: none;
}

.gameContainer
{
    display: flex;
    justify-content: center;
    margin-top: 50px;
}
.container
{
    display:grid;
    grid-template-rows: repeat(3,10vw);
    grid-template-columns: repeat(3,10vw);
    font-family: 'Roboto', sans-serif;
    
}

.box
{
    border: 2px solid black;
    font-size: 8vw;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    color: deeppink;
    text-align: center;
    
    
    padding: 10px;
    
}
.box:hover
{
    background-color: #f0c5f3;
}
.info
{
    font-size: 25px;
}
.gameInfo
{
    padding: 0 35px;
    font-family: 'Baloo Bhaina 2', cursive;
}
.gameInfo h1
{
    font-size: 2.5rem;
}

.imgBox img
{
    width: 0;
    transition: width 1s ease-in-out;
}

.br-0
{
    border-right: 0;
}
.bl-0
{
    border-left: 0;
}
.bt-0
{
    border-top: 0;
}
.bb-0
{
    border-bottom: 0;
}
#reset
{
    margin: 0 23px;
    padding: 6px 14px;
    background: #f984ff;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Baloo Bhaina 2', cursive;
    font-size: 15px;
    font-weight: bolder;
}

@media only screen and (max-width: 950px) 
{
    .gameContainer
     {
         flex-wrap: wrap;
     }
     .gameInfo
     {
         margin-top: 35px;
     }
     .gameInfo h1
     {
         font-size: 1.5rem;
     }
     .container {
        display: grid;
        grid-template-rows: repeat(3,15vw);
        grid-template-columns: repeat(3,15vw);
        font-family: 'Roboto', sans-serif;
    }
}