@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{
    margin: 0;
    padding: 0;
 }

 nav{
    background-color: black;
  color: white;
  height: 62px;
  font-size: 22px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  font-family: "Poppins", sans-serif;
 }
 nav ul{
    list-style-type: none;
 }

.gamecontainer{

   display: flex;
   justify-content: center;
   margin-top: 50px;

}
.container{
   display:grid;
   grid-template-rows: repeat(3,10vw);
   grid-template-columns: repeat(3,10vw);
   font-family: "Poppins", sans-serif;
 }
 .box{
   border:2px solid black;
   font-size: 8vw;
   cursor: pointer;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 .box:hover{
   background-color: rgb(178, 157, 196);
 }
 .info{
  font-size: 25px;
 }
 .gameinfo{
   padding: 0 32px;
   font-family: "Poppins", sans-serif;
 }

 .imgbox img{
  width:0;
  transition: width 1s ease-in-out;
 }
 .br-0{
  border-right: 0;
 }
 .bl-0{
  border-left: 0;
 }
 .bb-0{
  border-bottom: 0;
 }
 .bt-0{
  border-top: 0;
 }
 #reset{
  margin: 0 23px;
  padding: 6px 14px;
  background-color: rgb(192, 169, 214);
  border-radius: 6px;
  cursor: pointer;
  font-family: "Poppins", sans-serif;
 }

 /* responsivenss */
 @media screen and (max-width: 800px) 
 {
    .gamecontainer{
      flex-wrap: wrap;
    }
    .gameinfo{
      margin-top: 34px;
    }
    .gameinfo h1{
      font-size: 1.5rem;
    }
    .container{
      grid-template-rows: repeat(3,20vw);
      grid-template-columns: repeat(3,20vw);
    }
 }