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

/*Basic element tweaks*/
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;
}

/*Main page*/
.page-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  margin: 20px auto 20px auto;

  background: rgba(0, 2, 2, 0.7);
  border-radius: 10px;

  text-align: center;
}

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

/*Nav styling
nav {
  font-size: 1.075em;
}

nav a {
  padding: 3px;

  width: 100%;
  height: auto;

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

  text-align: center;

  /*background-color: green;
  transition: transform .2s;
}

nav a:hover {
  transform: scale(1.5) skew(-20deg);
  transition: transform .2s;
}
*/

/*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;
  }
}
*/