@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Roboto:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Akaya+Telivigala&family=Lobster&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Akaya+Telivigala&family=Lobster&display=swap');
*{
    margin: 0;
    padding: 0;
    background-color: rgb(243, 207, 241);
}
nav{
    background-color: black;
    color: aliceblue;
    height: 75px;
    font-size: 21px;
    display: flex;
    align-items:center ;
    padding: 0px 12px;
    font-family: 'Lobster', cursive;
    
}
nav li{
    list-style-type: none;
    background-color: black;
}
.gameContainer{
    /* background-color: aqua; */
    display: flex;
    justify-content: center;
    margin-top: 40px;
    justify-content: center;
    flex-wrap: wrap;
}  
.container{
    display:grid ;
    grid-template-columns: repeat(3,10vw);
    grid-template-rows: repeat(3,10vw);
    font-family: sans-serif;
    grid-gap: 2px;
    
}


.box{
   border: 2px solid rgb(32, 28, 28);
   font-size: 7vw;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 5px;
   background-color: black;
   color: white;
   cursor: pointer;
}
.boxtext{
    background-color: black;
}
.box.box:hover{
    background-color: rgb(43, 41, 41);
}
.imageBox img{
    width: 0;
    transition: width 1s ease-in-out;
}
.gameInfo{
    margin: 2vw;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
}
.gameInfo h1{
    color: rgb(85, 48, 119);
    font-size: 2.5rem;
    margin-bottom: 10px;
    font-family: 'Akaya Telivigala', cursive;
}
.Info{
   font-family: 'Akaya Telivigala', cursive;
   margin-right: 1vw;
   font-size: 2em;
}
.rules{
    width:30vw;
    font-size: 1.5rem;
    font-family: 'Akaya Telivigala', cursive;
}
.time{
    font-size: x-large;
}
.timer{
    margin: 10px;
   width:10vw;
   height: 3vw;
   padding: 5px;
   border-radius: 5px;
   /* rgb(110, 143, 192) */
   background-image: linear-gradient( to bottom , rgb(110, 143, 192),  rgb(221, 134, 221));
   color: rgb(75, 33, 114);
   font-size: 2vw;
   font-family: sans-serif;
   text-align: center;
   border: 2px solid;
}

#reset{
   margin-bottom: 1.5vw;
   padding: 1vh 3vh;
   border-radius: 8px;
   background-color: rgb(233, 162, 185);
   color: rgb(75, 33, 114);
   font-size: 2vh;
   font-family: sans-serif;
   border: none;
   cursor: pointer;
}
#reset:hover{
    background-color: rgb(223, 182, 189);
}
@media screen  and (max-width: 950px){
    .container{
        margin-top: 20px;
        display: grid;
        grid-template-columns: repeat(3,20vw);
        grid-template-rows: repeat(3,20vw);
    }
    .gameInfo h1{
        font-size: 2rem;
    }
    .timer{
        width: 30vw;
        height: 8vw;;
    }
    .rules{
        width:85vw;
    }
    .Info{
        font-size: 1em;
    }
    .box{
        font-size: 10vw;
    }
    
}