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

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

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

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

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

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

/* Style for text within essay divisions */
.pe {
  font-family: serif;
  font-size: 20px;
}

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

span {
  font-size: 20px;
  font-weight: bold;
  color: #662a05;
  display: block;
  width: 100%;
  height: auto;  
  padding: 5px;
  border-top: 5px solid #d9a35d;
  border-bottom: 5px solid #d9a35d; 
  background-color: #baae94;
  background-color: rgba(186, 174, 148, 0.4); 
  text-align: left; 
}

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

#outer {
    width:100%;
    text-align: center;
    position: relative;
}
.inner {display: inline-block;}

/* Creates panels within the body for text */

.flex-container {
  display: flex;
  flex-direction: column;
  background-color: #fffff0;
  border: 4px solid #662a05;
  padding-left: 10px;
}

.essay {
  display: flex;
  flex-direction: column;
  background-color: #fafad2; /* light goldenrod yellow */
  border: 4px solid #662a05;
  padding-left: 10px;
}

/* Create three columns (3) that float next to each other */

columnl {
  float: left;
  width: 10%;  
}

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

columnr {
  float: left;
  width: 10%;
}

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

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other on small screens */
@media (max-width: 600px) {
  columnl, midcolumn, columnr {
    width: 100%;
    height: auto;
  }
}

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