body {
  margin: 0;
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

#heading {
  background-color: #f0f0f0;
}

#navigation-bar {
  text-align: justify;
}

#navigation {
  list-style: none;
  max-width: 94%;
  margin: 0 auto;
  padding: 0;
}

.navigation-item {
  display: inline-block;
}

.navigation-link {
  font-family: arial, helvetica, verdana, sans-serif;
  text-decoration: none;
  color: black;
  padding: 0 1vw;
  white-space: nowrap;
  transition: color 0.35s;
}

.navigation-link:hover {
  color: #5f5f5f
}

.navigation-link.current-page {
  color: #5f5f5f
}

.csshax {
  width: 100%;
  height: 1.4vw;
  display: inline-block;
}

#main {
  margin: 1em;
  padding: 0 4vw
}

.section-header {
  font-family: arial, helvetica, verdana, sans-serif;
  padding-top: 2vw;
}

.description {
  font-family: "Trebuchet MS", arial, helvetica, verdana, sans-serif;
  text-align: justify;
  line-height: 140%;
}

.footer {
  background-color: #f0f0f0;
  margin: 1.4vw 0 0 0;
  padding: 2%;
}

.footer-item {
  display: inline-block;
  width: 50%;
  font-family: sans-serif;
}

.footer-item.left {
  text-align: left;
}

.footer-item.right {
  text-align: right;
}

@media (orientation: landscape) {
  #heading {
    height: 36vw;
  }
  #headimg {
    width: 72%;
  }
  #navigation-bar {
    display: inline-block;
    width: 27%;
    padding-right: 2vw;
    vertical-align: top;
  }
  .navigation-link {
    font-size: 2.2vw;
  }
  .navigation-item {
    text-align: right;
    padding: 1vw 0 5vw 0;
    width: 100%;
  }
  .section-header {
    font-size: 2.6vw;
  }
  .description {
    font-size: 1.5vw;
  }
  .footer-item {
    font-size: 1.6vw;
  }
}

@media (orientation: portrait) {
  #headimg {
    width: 100%;
  }
  .navigation-link {
    font-size: 3.6vw;
  }
  .navigation-item {
    text-align: center;
    max-width: 50%;
    min-width: 20%;
  }
  .section-header {
    font-size: 5.8vw;
  }
  .description {
    font-size: 3.8vw;
  }
  .footer-item {
    font-size: 2.9vw;
  }
}