style.css

@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaina+2&family=Ubuntu:wght@300&display=swap');
html, body {
  height: 100%;
  width: 100%;
}
*{
  margin:0;
  padding:0;
}
nav{
  background-color:rgb(37,9,37);
  color:white;
  height:38px;
  font-size:21px;
  display:flex;
  align-items:center;
  padding:0 12px;
  font-family:'Roboto',sans-serif;
}
nav ul{
  list-style-type:none;
}
.gameContainer{
  
  display:flex;
  justify-content:center;
  margin-top:50px;
  
}
.container{
  display: grid;
  grid-template-columns:repeat(3,10vw);
  grid-template-rows:repeat(3,10vw);
  font-family:sans-serif;
  position:relative;
}
.box{
    border:2px solid black;
  font-size:8vw;
    cursor:pointer;
  display:flex;
  justify-content:center;
  align-items:center;  
  }
.box:hover{
  background-color:rgb(242, 229, 255);

}
.gameInfo{
  padding: 0 34px;
  font-family: 'Baloo Bhaina 2', cursive;
}
.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{
    padding: 1px 23px;
    background-color: rgb(234, 171, 242);
    cursor: pointer;
    font-family: 'Baloo Bhaina 2', cursive;
    font-size: 15px;
    margin: 0 23px;
}
.info{
  font-size:22px;
}
.line{
  background-color:black;
  width:30vw;
  height:3px;
  position:absolute;
}
@media only screen and (max-width:800px) {
  
  .gameContainer{
    flex-wrap:wrap;
    
  }
  .gameInfo{
    margin-top:34px;
  }
  .gameInfo h1{
    font-size:1.5rem;
  }
  .container{
    display: grid;
  grid-template-columns:repeat(3,20vw);
  grid-template-rows:repeat(3,20vw);
  font-family: sans-serif;
  }
}