h1 {
font-size: 40px;
font-family: "IM Fell English", garamond, serif;
font-weight: normal;
text-align: center;
color: #2f4f42;
margin-top: 40px;
margin-bottom: 5px;
zoom: 1;
}

h2 {
font-size: 24px;
font-family: "IM Fell English", garamond, serif;
text-align: left;
color: #2f4f42;
zoom: 1;
font-weight: normal;
margin-top: 0;
margin-bottom: 0;
}

h3 {
font-family: "IM Fell English", garamond, serif;
font-size: 18px;
text-align: left;
font-weight: normal;
color: #2f4f42;
zoom: 1;
margin: 5px 0;

}

h4 {
font-size: 18px;
font-family: "IM Fell English", garamond, serif;
text-align: center;
color: #2f4f42;
zoom: 1;
font-weight: normal;
margin: -3px 0 -5px 0;
}

h5 {
font-size: 30px;
font-family: "IM Fell English", garamond, serif;
text-align: center;
color: #2f4f42;
zoom: 1;
font-weight: normal;
margin: 15px 0 -9px 0;
}

h6 {
font-size: 30px;
font-family: "IM Fell English", garamond, serif;
text-align: center;
color: #2f4f42;
zoom: 1;
font-weight: normal;
margin: 15px 0 -9px 0;
}

p {
font-size: 18px;
font-family: "EB Garamond", garamond, serif;
color: #192e25;
}


/*this is from my original css stylesheet I don't think it's going to mess anything here up but let's see*/
#navbar {
  font-family: IM Fell English;
  font-size: 18px;
  border-color: #2f4f42;
  margin: -5px 0 10px 0;

}

#navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  justify-content: center;
  display: flex;
}

#navbar li {
  float: left;
}

#navbar li-active {
  float: left;
}

#navbar li a {
  display: block;
  color: #2f4f42;
  border-radius: 20px / 50px;
  text-align: center;
  padding: 14px 19px;
  margin: 0px 15px;
  text-decoration: none;
}

#navbar li-active a {
  display: block;
  color: #2f4f42;
  border-radius: 20px / 50px;
  background-color: rgba(255,255,255,0.4);
  border: solid 1px #2f4f42;
  text-align: center;
  padding: 13px 18px;
  margin: 0px 15px;
  text-decoration: none;
}

#navbar li a:hover {
  background-color: rgba(255,255,255,0.4);
}


ul {
  list-style-type: none;
}

li a {
  text-decoration: underline;
  color: blue;
}

  
body {
  font-family: garamond, serif;
  background-color: #e3e5fa;
  background-image: url('morris_tile.jpg');
  background-attachment: fixed;
}

#container {
                max-width: 900px;
                /* this is the width of your layout! */
                /* if you change the above value, scroll to the bottom
      and change the media query according to the comment! */
                margin: 0 auto;
                padding-top: 13px;
                /* this centers the entire page */
                background-color: rgba(240,240,240,0.85);
                        }


/*Inserts a header section with the chosen image at the top of the page. Goes before the header div.*/

  
/*This is where your header stuff goes. The inside uses the post-inner class like posts do, instead of having a separate class name.*/
/*(If you want to give it different behavior, then add a #header .post-inner {} after the rules for .post-inner to make a special ruleset for it.)*/
#header {
  width: 872px;
  border: 4px double #2f4f42;
  margin: 10px;
  }
  
/*Normally inside the header.*/
#description {
  padding: 10px;
  margin: 10px auto;
  }

/*Contains the columns of posts.*/
.column-wrapper {
  columns: 3;
  min-height: 80%;
  width: 900px;
  margin: 0 auto;
  column-gap:0px;
  }
  
/*Variable and fixed-height boxes.*/
.post, .post-scroller {
  display: inline-block;
  margin: 0 auto;
  margin-bottom:0px;
  overflow-y: auto; /*To give fixed-height posts a scroller, and make images outside the post-inner div conform to rounded corners.*/
  }
  
  
.post-border {
  display: inline-block;
  margin: 10px;
  border-style: double;
  border-width: 4px;
  border-color: #2f4f42;
  margin-bottom: 10px;
  overflow-y: auto; /*To give fixed-height posts a scroller, and make images outside the post-inner div conform to rounded corners.*/
  }
  
.post-bio {
  display: inline-block;
  margin: 0 auto;
  margin-bottom:0px;
  column-span: all; /*To give fixed-height posts a scroller, and make images outside the post-inner div conform to rounded corners.*/
  }
  
.post img, .post-scroller img { /*Prevent image overflow.*/
  max-width: 100%;
  height: auto;
  }
  
.post img:hover {
  opacity: .7;
}
  
/*Fixed-height box.*/
.post-scroller {
  height: 500px;
  }
  
.post-inner { /*because padding doesn't play nice with divs directly inside columns*/
  margin: 10px;
  }
  
/*Special optional styling for images used as post headers.*/
.post-head-image {
  padding: 0;
  }
  
/*Looks similar to footer but just covers a big section.*/
.block-color-section {
  min-height:1em;
  margin-top: 10px;
  margin-bottom:20px;
  }
  
.block-color-inner {
  padding:10px;
  padding-left: 10%;
  padding-right: 10%;
  margin: 0 auto;
  }
  
.flex-container {
  display: flex;
  flex-wrap: wrap;
  }

.flex-container > div {
  border: double 4px #2f4f42;
  margin: 10px;
  padding: 10px;
  }  
  
span.social {  
  display: inline-block;
  width: 200px;
  border: double 4px #2f4f42;
  margin: 10px;
  padding: 10px;
}

span.bio {  
  display: inline-block;
  width: 600px;
  margin: 10px;
  padding: 10px;
}

#footer {
  background: #a10000;
  color: #fff;
  min-height:1em;
  margin-top: 10px;
  bottom: 0;
  }
  
/*Variant footer. This will stick at the bottom of the page, and overlap anything that gets too close. Use only for pages too short to scroll.*/
#footer-sticky {
  position:fixed;
  width: 100%;
  background: #a10000;
  color: #fff;
  min-height:1em;
  bottom: 0;
  margin-top: 10px;
  margin-bottom:0;
  }
  
#footer-content {
  /*For some reason the padding needs at least 1px top and bottom or else it automatically gets a giant margin instead. I still don't know why it does that. Just don't make it 0.*/
  padding:1px; 
  padding-left: 10px;
  padding-right: 10px;
  margin: 0 auto;
  }
  
  
/*For making columns in the footer like demonstrated.*/
.footer-columns {
  columns: 3;
  width: 80em;
  margin: 0 auto;
  column-gap:10px;
  }
  
/*For when you want to make distinct columns of different stuff without a million <br>s.*/
.footer-column {
  text-align: left;
  display: inline-block;
  height:6em;
  width: 100%;
  padding: 10px;
  padding-top:0;
  }
  
/*Used to style lists of links without big obvious bullets.*/
#footer li {
  padding-left:0;
  padding-top: 2px;
  padding-bottom: 2px;
  list-style-type: none;
  }



@media(max-width:800px) { /*Allow smaller side margins on narrower screens.*/
 #description, .column-wrapper, .footer-columns {
    width: 95%;
    }
 #header {
    width: 88%;
    margin-left: 19px;
    margin-right: 12px;
     }
    
  }  
      


@media(orientation:portrait) { /*Removes columns entirely for mobile*/
  .column-wrapper, .footer-columns {
    columns: 1;
    }
    #navbar ul {
    flex-wrap: wrap;
    }
    aside {
    width: 100%;
                }
  }