body {
  background-color: lightblue;
  font-family: courier;
}

h1 {
  font-size: 40px;
}

h2 {
  font-size: 25px;
}

/* makes the background white on each section, margin-bottom so the boxes are not touching each other */
section {
  background: white;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 10px;
}

/* splits the grid into 3 boxes */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 10px;
}

/* edits the text in the grid */
.insidegrid {
  background-color: skyblue;
  color: magenta;
  text-align: center;
  padding: 20px;
  border-radius: 10px;
}
/* changes color when you hover over the grids for fun */
.insidegrid:hover {
  color: lightgrey;
  background-color: darkblue;
}

/* makes image resize based on screen size */
.responsiveimg {
  width: 100%;
  height: auto;
  display: block;
  margin: auto;
  border-radius: 10px;
}