html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
   text-align: justify;
   font-family: Arial, sans-serif;
   background: #204047;
   color: #382907;
}

h2 {
   font-family: Arial, sans-serif; /* Added to change the fonts later with the Google Fonts API */
   font-size: 3.15em;
}

h3 {
   font-family: Arial, sans-serif;
   font-size: 2em;
   font-variant: small-caps;
}

h4 {
   font-family: Helvetica, sans-serif; /* Same here */
   font-size: 1.55em;
}

a {
   text-decoration: none; /* Don't forget to add focus, hover, and active states! */
}

ul {
   list-style: none;
   font-size: 1.25em;
   display: inline-block;
   padding-right: 4em;
}

article {
   line-height: 1.35em;
   text-indent: 35px;
}

span {
   font-style: italic;
   padding-left: 10px;
}

img {
   max-width: 100%;
   max-height: 100%;
}

video {
   max-width: 100%;
   max-height: 100%;
}

fieldset {
   background: white;
}

.page {
   max-width: 90%;
   margin: -50px auto;
   padding: 60px 20px 20px 20px;
   background: #f0f3f4; /*Remember to edit this, Alan!*/
}

.empty {
   box-shadow: 0 0 10px red;
}

#sidebar {
   display: block;
   float: right;
   position: relative;
   max-width: 25%;
   padding: 20px;
   font-size: .85em;
   line-height: 1.5em;
}



#content {
   width: 75%;
   max-width: 100%;
   float: left;
}

#footer {
   position: relative;
   clear: both;
   width: 95%;
   background: rgba(100, 100, 100, .25);
   padding: 20px 10px;
   margin: 0 auto;
}

[placeholder]:focus::-webkit-input-placeholder {
  transition: opacity 0.5s 0.5s ease; 
  opacity: 0;
}
/*Forest pallete:

rgb(144, 255, 66);
rgb(124, 141, 255);
rgb(90, 176, 30);
rgb(204, 80, 34);
rgb(176, 76, 39);

http://paletton.com/#uid=33n0u0ki1etbgnRemi+mtbNrz7Y
*/