/* Background of the webpage, should be in a nice cream color*/
 body {
  background-color: #FAFCD9;
}

h1 {
  text-align: center;
}

/* Style of the button that is used to open and close the collapsible content */
.collapsible {
  background-color: navajowhite;
  color: black;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  font-size: 15px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: tan;
}

/* Style of the collapsible content */
.content {
  display: none;
  border: 4px solid tan;
  overflow: hidden;
  background-color: papayawhip;
  column-count: 3;
  column-gap: 80px;
  column-rule: 3px;
}

/* Centers the text below the image (as well as hopefully making everything line up)*/
figure {
  justify-content: center;
  text-align: center;
}