style.css

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  
}

.container{
  min-height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(151,62,224);

}

.main{
  display: flex;
  flex-direction: column;
  align-content: center;
  width: 50vw;
  justify-content: center;
  text-align: center;
  margin: 20px auto;
}

.main h1{
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 4vmax;
  color: white;

  
}

.main h2{
  display: inline-block;
  font-size: 1.3vmax;
  font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  background: rgb(255,181,251);
  padding: 12px 5px;
  margin: 6px;
  border-radius: 15px;
}

button{
  margin: 6px;
  width: 12rem;
  font-size: 1.2vmax;
  font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  padding: 12px 5px;
  border-radius: 15px;
  border: none;
  background-color: rgb(151,62,224);
  color: white;
  box-shadow: 1px 3px 5px white;
}

button:hover{
  cursor: pointer;
  background-color: rgb(157, 72, 247);
  transition: 0.3s ease-in;
}

#pauseGame{
  display: none;
}

.grid{
  display: flex;
  flex-wrap: wrap;
  width: 50vw;
  justify-content: center;
  align-items: center;

}

.square{
  width:12vmax ;
  height:10vmax;
  border-radius: 1.2rem;
  border: 1px solid pink;
  margin: 10px;
  box-shadow: 1px 2px 3px white;
}

.mole{
  background:url('./Assets/mole.png') ;
  background-size: cover;
}

@media screen and (max-width:600px){
  .container{
    display: flex;
    flex-direction: column;
  }
  .main{
    width: 100vw;
    height: 30vh;
  }

  .main h1{
    font-size: 6vmax;
  }
  .main h2{
    font-size: 2vmax;
  }

  button{
    font-size: 2vmax;
  }
  .grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .square{
    width: 13vmax;
    height: 12vmax;
  }


  
}