html {
  height: 100%;
  box-sizing: border-box;
 }
*,
*:before,
*:after {
  box-sizing: inherit;
}

  body {
   position: relative;
   background-color: #000;
   font-family: "Raleway", sans-serif;
   margin: 0;
   padding: 0;
   padding-bottom: 20px;
   min-height: 100%;
  }
  #pagecontainer {
   min-height: calc(100% - 36px);
   position: relative;
  }
  .menuWrapper {
   width:100%;
   padding: 0;
   padding-bottom: 20px;
   margin:0;
   text-transform: uppercase;
   background-image: linear-gradient( #fff 40%, #bbb 60%, #000 100%);
  }
  nav {
   margin: 0 auto;
   text-align: center;
   width: auto;
  }
  nav ul ul {
   display: none;
   padding: 0;
   padding-top: 9px;
   padding-bottom: 9px;
   background: #792a26;
   background: linear-gradient(top, #682421 0%, #992a26 50%, #682421 100%);
   background: -moz-linear-gradient(top, #682421 0%, #992a26 50%, #682421 100%);
   background: -webkit-linear-gradient(top, #682421 0%, #992a26 50%, #682421 100%);
   border-radius: 2px;
   position: absolute;
   top: 100%;
   z-index: 50;
  }
  nav ul li:hover > ul {
   display: block;
  }
  nav ul {
   padding: 0;
   list-style: none;
   position: relative;
   display: inline-table;
   font-family: 'Merriweather Sans', sans-serif;
   text-align: left;
  }
  nav ul:after {
   content: "";
   clear: both;
   display: block;
  }
  nav ul li {
   float: left;
   margin: 2px 3px;
   margin-bottom: 9px;
   border-bottom: 1px solid black;
   transition: 0.2s all ease;
   padding: 0 20px;
  }
  nav ul li:hover {
   margin-bottom: 0;
   border-bottom: 10px solid #682421;
   transition: 0.2s all ease;
  }
  nav ul li a {
   color: black;
  }
  nav ul li a:hover {
   color: orangered;
  }
  /* Footer was almost working, helped along by https://chrisbracco.com/css-sticky-footer-effect/ */
  .footer {
   clear: both;
   height: 35px;
   background: #CCC;
   border-top: 1px solid #9D9D9D;
   border-top: 1px solid #aaa;
   color: #aaa;
   background-color: #333;
   margin: 0 auto;
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
  }
  .footer p {
   text-align: center;
   font-size: 0.5em;
  }
  .header {
   width: 100%;
   text-align: center;
   background-color: #fff;
  }
  h1 {
   font-size: 80px;
   font-family: "Stalemate", cursive;
   margin: 0;
  }
  h2 {
   font-size: 50px;
   font-family: "Stalemate", cursive;
   margin: 0;
  }
  a {
   text-decoration: none;
   color: inherit;
  }
  .heavy {
   font-family: "Archivo Black", sans-serif;
   margin-top: 10px;
  }
  .content {
   width: 100%;
   margin: 0 auto;
   padding: 10px 30px;
  }
  .maincontent {
   max-width: 1200px;
   margin: 0 auto;
   columns: 2;
   color: #eee;
   padding-top: 30px;
  }
  .nocolumns {
   columns: 1;
  }
  .maincontent p {
   margin: 18px 0;
   margin: 30px 0;
  }
  .maincontent p:first-of-type {
   margin-top: 0;
  }
  .maincontent p:last-of-type {
   margin-bottom: 0;
  }
  .maincontent p:first-letter {
   font-family: "Stalemate", cursive;
   display: block;
   float: left;
   font-size: 4.2em;
   font-weight: bold;
   line-height: 100%;
   margin: -15px 6px -10px 0;
  }
  .portraitcrop {
   float: right;
   height: 90px;
   width: 60px;
   padding: 3px;
   vertical-align: top;
   object-fit: cover;
   background-color: #222;
   box-shadow: 0 0 1px 1px #444 inset;
   box-shadow: 10px 10px 1px 1px #444 inset;
   border-radius: 80% / 60%;
   transition: all 0.1s ease;
  }
  .peoplelist p:hover {
   background-color: #222;
   border-radius: 4px 35px 35px 4px;
   transition: all 0.1s ease;
  }
  .peoplelist p:hover .portraitcrop {
   box-shadow: 10px 10px 1px 1px #777 inset;
   transition: all 1s ease;
  }
  .peoplelist p {
   min-height: 80px;
   display: inline-block;
   width: 80%;
  }
  .peopleaddress {
   display: inline-block;
   margin: 0;
   padding: 0;
   padding-left: 20px;
   font-size: 12px;
   width: 60%;
  }
  /* don't use fancy dropcap for the event list */
  .eventlist p:first-letter {
   all: inherit;
  }
  .oneevent:hover {
   background-color: #222;
   border-radius: 4px;
  }

@media only screen and ( max-width: 800px ){
  .maincontent {
   columns: 1;
  }
  .footer {
   height: 40px;
   margin-top: 30px;
   padding-top: 10px;
   position: relative;
  }
  .peoplelist {
   width: 60%;
  }
  .peoplelist p {
   padding: 0 30px;
   margin: 10px auto;
  }
}