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;

/*grid-template-columns: 220px; */
/*navigation column is 220px* Did not set other column*/

/*alternate column method 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: "Source Sans Pro", sans-serif;
  font-size:14pt;
}

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

a {
font-family: "Source Sans Pro", sans-serif;
}

#headbox {
  text-align: center;
}

#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;
  }
}


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

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

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

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

#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-->
}