*{
    margin: 0;
    padding: 0;
}

nav{
    background-color:rgb(128, 14, 128);
    color: white;
 height: 50px;
 font-size: larger;
display: flex;
    align-items: center;
    position: relative;
   font-display: swap;
   font-variant-position: normal;
    padding: 0 12px;
    font-family: 'Roboto', sans-serif;
}

nav ul{
    list-style-type: none;
}

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

.container{
     background-color: pink;
     display:  grid;
     grid-template-rows: repeat(3,10vw);
        grid-template-columns: repeat(3,10vw);
        font-family: 'Roboto', sans-serif;
}

.box{
    border: 2px solid white;
    font-size: 3vw;
   cursor: pointer;
   display: flex;
   justify-content: center;
    align-items: center;
} 

.box:hover{
    background-color: rgb(243, 176, 234);
}

.gameInfo{
    padding: 0 34px;
   font-family: cursive;
}

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

#reset{
    
    padding: 0 20px;
    font-size: large;
    color: rgb(234, 103, 186);
    display: flex ;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    
}