*{
    margin: 0;
    padding: 0;
}
body{
    background-color: rgb(201, 153, 245);
}
nav{
    height: 10vh;
    color: white;
    font-size: 3vw;
    border: 2px solid rgb(177, 81, 255);
    background-color:rgb(187, 115, 253);
}
#head{
    padding-top: 0.5vw;
}
#mainct{
    padding-left: 5vw;
}
nav li{
    display: inline-block;
}
#soundImg img{
    width: 2vw;
}
#soundImg{
    width: 2vw;
    display: inline-block ;
}
nav ul{
    list-style: none;
}
.gameContainer{
    display: flex;
    margin-top: 5vh;
}
.gridcontainer{
    margin-left: 10vw;
    margin-top: 5vh;
    display: grid;
    width: 30vw;
    height: 30vw;
    grid-template-rows: repeat((3,10vw));
    grid-template-columns: repeat(3,10vw);
    background-color: rgb(201, 153, 245);
}
.box{
    /* width: 10vw; */
    height: 10vw;
    color: white;
    border: 1px solid white;
}
.box:hover{
    background-color: rgb(191, 137, 241);
}
.boxtext{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8vw;
}
.sideInfo{
    margin-left: 10vw;
    margin-top: 5vh;
    width: 35vw;
    text-align: center;
}

.info{
    background-color: rgb(201, 153, 245);
    font-size: 3vw;
    border: 2px solid white;
    border-radius: 5px;
    padding: 2vw 2vw;
    color: white;
}
#res{
    background-color: rgb(187, 115, 253);
    font-size: 2vw;
    border: 2px solid rgb(253, 253, 253);
    border-radius: 5px;
    padding: 1vw 1vw;
    color: white;
    margin-top: 30vh;
}
#res:hover{
    background-color: rgb(201, 153, 245);
}
@media screen and (max-width:1000px)
{
    .gameContainer{
        flex-wrap: wrap;
        justify-content: center;
    }
    .gridcontainer{
        width: 90vw;
        height: 90vw;
        margin: 0 50%;
        grid-template-rows: repeat((3, 30vw));
        grid-template-columns: repeat(3, 30vw);
    }
    .box{
        height: 30vw;
        display: flex;
        align-items: center;
        justify-content: center;

    }
    #soundImg img {
        width: 5vw;
    }
    #soundImg {
    width: 5vw;
    /* margin-top: 2vw; */
    }
    .boxtext{
        font-size: 15vw;
    }
    .sideInfo{
        width: 90%;
        margin: 5vh 30%;
        text-align: center;
    }
    nav{
        font-size: 8vw;
        text-align: center;
    }
    nav li{
        /* padding-top: 2vw; */
        padding-left: 0vw;
    }
    #head {
        padding-top: 0.0vw;
    }
    #mainct{
        margin-top: 5.5vw;
    }
    .info{
        font-size: 4.5vw;
        width: 50vw;
    }
    #res{
        margin-top: 3vh;
        padding: 2vw;
        font-size: 4vw;
    }
}