header {
  grid-area: headbox;  /*put id="headbox" in html code*/
  background-color: #c8102e;
  padding: 10px;
}

main {
  grid-area: main-content;  /*put id="main-content" in html code*/
  background-color: white;
  padding-top: 20px;
  padding-left: 20px;
  padding-bottom: 10px;
  padding-right: 30px;
}

nav {
  padding-top: 30px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  grid-area: navbar;  /*put id="navbar" in html code*/
  background-color: #fff9d9;
}

footer {
  padding: 10px;
  grid-area: footbox;  /*put id="footbox" in html code*/
  background-color: #c8102e;
}

.wrapper {
  display: grid;
  grid-gap: 0px;

/*column method for side navigation is below. Can adjust ratio.*/
  grid-template-columns: 1fr 5fr;

  grid-template-areas: 
    "headbox  headbox"
    "navbar main-content"
    "footbox  footbox";
}

@media (max-width: 500px) {
  .wrapper {
    grid-template-columns: 4fr;
    grid-template-areas:
      "headbox"
      "navbar"
      "main-content"
      "footbox";
  }
}

.skip-to-main-content-link {    <!--Allows screen reader users to access main content easily, as soon as they press the tab key-->
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 1em;
  background-color: black;
  color: white;
  opacity: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14pt;
}

.skip-to-main-content-link:focus {
  left: 50%;
  transform: translateX(-50%);
  opacity: 1;
}

body {
  font-family: "Crimson", sans-serif;
  font-size:14pt;
}

ul {
font-family: "Crimson", sans-serif;
}  /*WITHOUT THIS UL CODE, THE UNORDERED LISTS REVERTED TO DEFAULT FONT.*/

a {
font-family: "Crimson", sans-serif;
}


a:link       { color: #c8102e }
a:visited    { color: #c8102e }
a:hover      { color: #960C22 }
a:focus	     { color: #960C22 }
a:active     { color: #c8102e }

#navbar {
  line-height: 1.25;
  color: #c8102e;
}

#navbar ul li {
  list-style-type: none;
  font-size: 13pt;
}

#navbar li:not(:last-child) {
    margin-bottom: 14px;
}

#navbar {
 a:link {
  color: #c8102e;
  text-decoration: none; <!--Takes underline away from link text-->
  }

  a:visited {
  color: #c8102e;
  text-decoration: none; <!--Takes underline away from link text-->
  }

  a:hover {  <!--hover must come after a:link and a:visited-->
  color: #c8102e;
  font-weight: bold;
  text-decoration: none; <!--Takes underline away from link text-->
  }

  a:focus {  <!--changes style when text receives keyboard focus, without using a mouse. Should match the a:hover style-->
  color: #c8102e;
  font-weight: bold;
  }

  a:active {
  color: #c8102e;
  }
}

p {
  margin-top: 0pt;
}

h1  {font-size:36pt;
  font-family: "League Gothic", sans-serif;
  text-align: left;
  margin-bottom: 20pt;
}

h2 {
  font-size:22pt;
  font-family: "Crimson", sans-serif;
  font-weight: bold;
  margin-top: 12pt;
  margin-bottom: 0pt;
}

h3 {
  font-size: 16pt;
  font-family: "Crimson", sans-serif;
  font-weight: bold;
  margin-top: 12pt;
  margin-bottom: 0pt;
}

h4 {
  font-size: 16pt;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: bold;
}

main ol {
  font-family: "Crimson", sans-serif;
}  /*WITHOUT THIS UL CODE, THE ORDERED LISTS REVERT TO DEFAULT FONT.*/


/*For UNORDERED (bulleted) list items, where the bullet is indented 25px (just over 0.25 inch) and the list content is indented 0.5 inch = 48px.*/
main ul li {     
  padding-left: 48px;
  text-indent: -25px;  /*moves first line back by the given amount*/
  margin-top: 10px;
  margin-bottom: 14px;
}

.hang1 {                  /*use for hanging indent list items with single digit numbers. See Video Calculus page for an example.*/
  padding-left: 48px;     /*pads all of the text 48px = 0.5 inches*/
  text-indent: -17px;     /*moves first line back 17 px which accounts for the single digit and the space*/
  margin-top: 10px;
  margin-bottom: 14px;
}

.hang2 {                  /*use for hanging indent ORDERED <ol> list items with double digit numbers. See Video Calculus page for an example.*/
  padding-left: 48px;     /*pads all of the text 48px = 0.5 inches*/
  text-indent: -25px;     /*moves first line back 25 px which accounts for the double digit and the space*/
  margin-top: 10px;
  margin-bottom: 14px;
}

.indent {              /*Indents text 48px = 0.5 inches.*/
  margin-left: 48px;
}

.indent2 {		/*used for text after numbered h2 elements (when number is single digit)*/
  margin-left: 28px;	
}

.indent3 {
  margin-left: 40px;
}

main table {
  font-size:14pt;
}  /*If this is not specified, the table font size is smaller.*/

main table th {
  font-family: "Crimson", sans-serif;
}

#footbox {  
  clear: both;  
  text-align: center;  
  font-size: 12pt;  
  color: white;

  a:link {
  color: white;
  background-color: #c8102e;
  text-decoration: none;
  }

  a:visited {
  color: white;
  background-color: #c8102e;
  text-decoration: none;
  }

  a:hover {
  color: white;
  background-color: #c8102e;
  text-decoration: underline;
   }

  a:focus {
  color: white;
  background-color: #c8102e;
  text-decoration: underline;
    }

  a:active {
  color: white;
  background-color: #c8102e;
  text-decoration: none;
  }
}

#footbox ul li
{
    list-style-type: none;
    display: inline;  <!--CREATES HORIZONTAL LIST-->
}