/* Google fonts import */
/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Macondo&display=swap'); */



/* Grid and square styles */

/* game text styles */

h5 { font: 20px sans-serif}
h6 { font: 20px sans-serif}


.grid {
  display : flex;
  flex-wrap: wrap;

  width: 606px;
  height: 906px;

}

.square {
 
  text-align: center;
  width: 200px;
  height: 300px;
  border: 1px solid black;
  /* box-sizing: border-box;  */
 }

/* responsive design for grid and squares */




@media (max-width: 820px) {
  .grid {
    width: 606px;
    height: 906px;
    background-color: rgb(228, 243, 15);
  }

  .square {
    width: 200px;
    height: 300px;
  }
/* Transform text  */
h5  {font-size: 15px;}
h6  {font-size: 15px;}
/* Transform button size */

button {width: 60px;
height: 30px;

}



}
@media (max-width: 610px) {
  .grid {
    width: 306px;
    height: 456px;
    background-color: rgb(243, 15, 15);
  }

  .square {
    width: 100px;
    height: 150px;
    
  }

/* Transform text  */
h5  {font-size: 10px;}
h6  {font-size: 10px;}

/* Transform button size */

button {width: 30px;
height: 15px;

}

}
 



/* used code from my milestone 1 project to style body of game */
 body {
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}