body {
  display: flex;
  flex-direction: column;

  padding: 0;
  margin: 0;

  background: url("/images/pexels-4254548-crop2.jpg") fixed no-repeat;
  background-size: cover;

  color: #fff;
  font-family: "Droid Sans", Verdana, sans-serif;
  line-height: 150%;
}

/*Some custom tweaks to various basic elements.*/
a {
  color: #0783b9;
}

a:hover {
  color: #e0ffff;
  transition: ease-in 0.5s ease-out 0.5s;
}

b,strong {
  color: #c0feff;
}

h1,h2,h3,h4,h5,.nav {
  font-family: "Palatino", Garamond, serif;
}

h1,h2,h3,h4,h5 {
  line-height: 125%;
}

blockquote {
  border-left: 2px solid #aaf0ff;
  padding: 0.1px 0.75em;
  margin-left: 1.25em;
  background: rgba(250, 255, 255, 0.1);
}

hr {
  width: 90%;
  height: 1px;

  margin: 1.75rem auto;
  align-self: center;

  border: 0;
  background: #ffffff;
}

.tiny {
  font-size: 9px;
  margin: 0 auto;
  text-align: center;
}

/*Contains the top section.*/
.header-wrapper {
  display: flex;
  flex-direction: column;

  width: 100%;
  height: 200px;

  margin: 0 auto;

  /*background: rgba(0, 2, 2, 0.7);*/
  background: linear-gradient(rgb(0, 0, 0, 0.7), rgb(0, 0, 0, 0.7)), url("/images/pond.gif");
  background-size: cover;
  background-position: center;

  border-bottom: 3px solid black;
}

.header {
  display: flex;

  height: 100%;
  width: 100%;

  overflow: hidden;

  /*background: linear-gradient(rgb(0, 0, 0, 0.7), rgb(0, 0, 0, 0.7)), url("pond.gif");
  background-size: cover;
  background-position: center;*/
}

.links {
  display: flex;
  justify-content: space-around;

  background: rgba(0, 2, 2, 0.7);
  padding: 10px;
}

.header h2, .header h3, .header h1 {
  font-weight: bold;
  color: white;
  text-align: center;
  margin: auto;
  opacity: 0.999999;
}

/*Contains everything that isn't the header.*/
.page-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  margin: 100px auto 0 auto;
}

.page-left,.page-middle,.page-right{
  display: flex;
  flex-direction: column;

  padding: 10px;

  height: auto;

  background: rgba(0, 2, 2, 0.7);
}

.page-left,.page-right{
  width: 10%;
}

.page-middle {
  width: 50%;

  border-radius: 10px;
}

.page-left{
  border-radius: 0 10px 10px 0;
}

.page-right{
  border-radius: 10px 0 0 10px;
}

article {
  width: 75%;
  padding: 15px;
  margin: 0 auto;
}

.footer {
  width: 100%;
  padding: 1.5rem 0 1.75rem 0;
  margin: 0 auto;

  text-align: center;
  font-size: 0.85rem;
}

/*Nav links. Used in top section and footer.*/
nav {
  font-size: 1.075em;
}

/*Nav link styling.*/
nav a {
  padding: 3px;
  margin: 0 5px 5px 0;

  color: white;
  font-weight: bold;
  text-decoration: none;
}

/*Prevent image overflow*/
.main img,.top-section img,.footer img,.left img,.right img {
  max-width: 100%;
  height: auto;
}

/*Variation for narrower screens.
@media(max-width: 920px) {

  .top-section,
  .main,
  .footer {
    width: 800px;
    width: calc(100vw - 2rem);
  }

  .left {
    width: 425px;
  }

  .right .nav {
    max-width: 365px;
    max-width: calc(100vw - 435px - 2rem);
  }
}

Mobile layout.
@media(orientation:portrait), (max-width: 575px) {
  .header-gap {
    height: 60vh;
  }

  .top-section,
  .left,
  .right .nav,
  .main,
  .footer {
    margin: 0 auto;
    width: auto;
    padding: 0;
  }

  .main,
  .top-section,
  .footer {
    margin: 0.1px 1em;
  }

  .left,
  .right,
  .right .nav {
    display: block;
    text-align: center;
  }

  .left,
  .right,
  .right .nav {
    float: none;
    width: 100%;
  }

  .right .nav {
    max-width: 100%;
    width: 100%;
  }
}

For narrow screens
@media(max-width: 790px) {
  .wrapper {
    width: 95%;
  }

  .header h1,
  .header h2,
  .header h3 {
    Vertical centering gets wonky when the box is variable width
    margin: 20% 5% auto;
  }
}

Mobile compatibility
@media(orientation: portrait) {
  .wrapper {
    width: 95%;
  }

  .header {
    height: 230px;
  }

  .header h1,
  .header h2,
  .header h3 {
    margin: 20% 3% auto;
  }
}
*/