h1, h2, h3, legend {
 font-family: 'Merriweather', serif;    }
body {
   font-family: 'Open Sans', Arial, sans-serif;
   font-size: 16px;
    background: #FAFAFA;
}

.header {
  transition-duration: 0.3s;
  padding: 0 0 20px 0;
  position: fixed;
  top: 0;
  width: 70%;  
  box-shadow:  0px 2px 5px 0px rgba(0, 0, 0, 0.1);    
  background-color: white;    
}
.header__utility {
    background-color: #E0E0E0;
    height: 2em;
}
.header__utility-menu {
    padding: 5px 0;
}
.header__utility-menu ul {
    list-style: none;    
}
.header__utility-menu li {
    float: right;
    margin-right: 5px;
}

.header h1 {
  font-size: 32px;
    font-weight: bold;
  float: left;
}
.header h1 a {
  display: block;
  text-decoration: none;
  height: 45px;
}
.header h1 a:link {
    color: #5D4037;
}



.header nav {
  float: right;
    font-size: 15px;
}
.header nav ul li {
  float: left;
}
.header nav ul li a {
  margin: 0 15px;
  color: #2962FF;
  text-decoration: none;
  padding-top: 20px;
  display: block;
  border-bottom: 3px #2962FF solid;
}
.header nav ul li a:hover {
  border-bottom-color: #FF6D00;
  color: #FF6D00;
}

header.sticky {
  padding: 10px 0;
background: white;    
}
header.sticky h1 a {
  height: 23px;
}
header.sticky nav ul li a {
  padding-top: 0;
  border-bottom: none;
  margin-top: 11px;
}





.HolyGrail {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  margin: 0px 15%;
}

.HolyGrail-body {
  display: flex;
  flex: 1;
}

.HolyGrail-content {
  flex: 1;
}

.HolyGrail-nav, .HolyGrail-ads {
  /* 12em is the width of the columns */
  flex: 0 0 12em;
    background-color: yellow;
}

.HolyGrail-nav {
  /* put the nav on the left */
  order: -1;
}