/* Color Scheme
strong orange, (181, 144, 40), #d59028;
dark brown, (102, 42, 5), #662a05;
dark brown, (71, 29, 3), #471d03;
grayish orange, (186, 174, 148), #baae94;
soft orange, (271, 163, 93), #d9a35d;
ivory, (255, 255, 240), #fffff0; */

* {box-sizing: border-box;}

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

/* Create the gradient for the header */
#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: 20px;
  font-weight: bold;
  color: #471d03;
}

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

/* 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;}

/* Creates panels within the body for text */
.flex-container {
  display: flex;
  flex-direction: column;
  background-color: #fffff0;
  border: 4px solid #662a05;
  padding-left: 10px;
}

/* Create five (5) columns that float next to each other */
column1 {
  float: left;
  width: 4%;  
}

columndaa {
  background-color: #fffff0;
  float: left;
  width: 45%;
  padding: 20px;  
}

column3 {
  float: left;
  width: 2%;
}

columnrww {
  background-color: #fffff0;
  float: left;
  width: 45%;
  padding: 20px;  
}

column5 {
  float: left;
  width: 4%;
}

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

/* Responsive layout - makes the five columns stack on top of each other instead of next to each other on small screens */
@media (max-width: 600px) {
  column1, columndaa, column3, columnrww, column5 {
    width: 100%;
    height: auto;
  }
}

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