*
{
    box-sizing:border-box;
}

html
{
    font-size:62.5%; /* 62.5% of 16px = 10px */
}

body
{
    margin:0;
    font-size:1.6rem;
    font-family: 'Roboto', sans-serif;
}

.main 
{
    background-color:rgb(37,9,37);
    padding:0.8rem 0.7rem;
    color:white;
}

.logo-container
{
    cursor: pointer;
}

.logo-container img
{
    width:22px;
    vertical-align:top;
    border:1px solid white;
    border-radius:100%;
}

.logo-container span
{
    vertical-align:top;
    font-weight:600;
}






/* Game Structure */


.gameContainer
{
    display:flex;
    justify-content:center;
    margin-top:40px;
}



.game 
{
    width:fit-content;
    height:fit-content;
    display:grid;
    grid-template-rows:repeat(3,10vw);
    grid-template-columns:repeat(3,10vw);
    margin-right:25px;
}


.box
{
    font-family: 'Roboto', sans-serif;
    background-color:white;
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    border: 1.5px solid black;
}

.move
{
    color:rgb(37,9,37);
    font-size:9vw;
}

.box:hover
{
    background-color:rgb(252, 238, 252);
}

.info
{
    font-family: 'Baloo Bhaina 2', cursive;
}


#btn-reset
{
    margin-left:12px;
    background-color:rgb(252, 238, 252);
    padding:4px 8px;
    border:1px solid black;
    border-radius:4px;
    cursor: pointer;
}

#btn-reset:hover
{
    transform:scale(1.05);
    background-color:rgb(252, 227, 252);
}

#btn-reset:active
{
    transform:scale(1);
}


.win-anim img
{
    width:0;
    transition:0.8s;
}


.wrong-move
{
    margin-top:70px;
    font-size:3rem;
}


.wrong-move i
{
    font-size:4rem;
    color:red;
    vertical-align:middle;
}




/* utility classes */

.br-0
{
    border-right:0;
}

.bl-0
{
    border-left:0;
}

.bt-0
{
    border-top:0;
}

.bb-0
{
    border-bottom:0;
}



@media only screen and (max-width:660px)
{
    .gameContainer
    {
        flex-direction:column;
        align-items:center;
    }

    .info
    {
        margin-top:20px;
    }

    .info h1 
    {
        font-size:1.8rem;
    }

    .win-anim
    {
        margin-top:15px;
    }

    .wrong-move
    {
        text-align:center;
    }

    .gameContainer
    {
        margin-top: 96px;
    }
}





.game
{
    position:relative;
}

.line
{
    background-color:black;
    width:30vw;
    height:3px;
    position:absolute;
}