h1 {
  text-align: center;
}

main select {
  padding: 20px;
  font-size: 15px;
  background-color: rgb(62, 146, 62);
  border-radius: 10px;
  height: 60px;
}

h2 {
  text-align: center;
  background-color: rgb(7, 7, 56);
  color: azure;
  height: 30px;
}

.error {
  text-align: center;
}

#tiles {
  margin: 20px;
}

/*providing feedback to the user, helping them understand the images can be interacted with*/
img:hover {
  opacity: 0.5;
  transition: 0.2s;
  cursor: pointer;

}

/* Height of image will be the same size as container and maintain aspect ratio */
#figure {
  height: auto;
}

/* Image will change width to be more proportional to mobile screens */
@media screen and (max-width: 425px) {
  #figure {
    width: 96px;
  }
}

/* image will change width to be more proportional to larger screens */
@media screen and (min-width: 1440px) {
  #figure {
    width: 200px;
  }
}