* {box-sizing: border-box;}

/* Style the header */
.header {
  font-family: 'Charm';
  font-size: 55px;
  color: #fffff0;
  text-shadow: none;
  text-align: center;
}

/* Create the gradient for the body */
#grad {
  background-color: #662a05; /* For browsers that do not support gradients */
  background-image: linear-gradient(#662a05, #d59028); /* Standard syntax (must be last) */
}

h1 {
font-family: sans-serif;
font-size: 18px;
text-shadow: 7px 7px 14px darkslategray;
font-weight: bold;
color: #471d03;
}

h4 {
  font-family: sans-serif;
  font-weight: bold;
  color: #471d03;
}

p {
  font-family: Arial, Helvetica, sans-serif;
  text-align: left;
  font-size: 14px;
  font-weight: normal;
  color: black;
}

/* Style the 'Return to home' button and hover change */
.button {
  background-color: #662a05; 
  border: 2px solid #fffff0; 
  color: #fffff0;
  font-family: sans-serif;
  font-size: 14px;
  font-weight: bold;
  padding: 10px;
  text-align: center;
  display: inline-block;
  margin: 4px 2px;
  border-radius: 16px;
  cursor: pointer;
}

.button:hover {
  background-color: #baae94;
  color: #471d03;
  text-decoration: none;
  opacity: 0.7;
}

a {text-decoration: none;}

/* Style the information buttons in the modals and hover change */
.modal-button {
  background-color: #d59028; 
  border: 2px solid #471d03; 
  color: #471d03;
  font-family: sans-serif;
  font-size: 14px;
  font-weight: normal;
  padding: 5px;
  text-align: center;
  display: inline-block;
  margin: 4px 2px;
  border-radius: 12px;
  cursor: pointer;
}

.modal-button:hover {
  background-color: #baae94;
  color: #471d03;
  text-decoration: none;
  opacity: 0.7;
}

.number {font-size: 40px;}

/* Create three (3) equal columns that float next to each other */
.column1, .column2, .column3 {
  background-color: #fffff0;
  float: left;
  width: 33%;
  height: auto;
  padding: 0px 30px;
  border: 2px solid #662a05;
  margin: 2px;
}

/* Create two (2) unequal blocks for images and text that float next to each other */
.block1 {
  background-color: #fffff0;
  float: left;
  width: 75%;
  height: auto;
  padding: 0px 30px;
  border: 2px solid #662a05;
  margin: 2px;
}

.block2 {
  background-color: #fffff0;
  float: left;
  width: 24%;
  height: auto;
  padding: 0px 30px;
  border: 2px solid #662a05; 
  margin: 2px;
}

/* Create two (2) equal lists of authors that float next to each other */
.list1, .list2 {
  background-color: #fffff0;
  float: left;
  width: 49%;
  height: auto;
  padding: 0px 30px;
  border: 2px solid #662a05;
  margin: 2px;
}
  
img {float: left;}

.responsive {
  width: 100%;
  height: auto;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three (3) columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .column1, .column2, .column3 {
    width: 100%;
  }
}

/* Responsive layout - makes the two (2) blocks stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .block1, .block2 {
    width: 100%;
  }
}


/* Responsive layout - makes the two (2) lists stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .list1, .list2 {
    width: 100%;
  }
}

/* For three (3) columns */
.box {
  float: left;
  width: 33.33%;
  padding: 50px;
}

/* For two (2) columns */
.box2 {
  float: left;
  width: 50%;
  padding-top: 10px;
  padding-left: 45px;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* Style the footer */
footer {
  position: relative;
  left: 0px;
  bottom: 0px;
  width: 100%;
  padding: 10px;
  text-align: center;
}