/*
 * The media queries in this file are sorted, regardless of its changes, by
 * - ascending min-width
 * - ascending max-width
 */

@media screen and (min-width: 350px) {
  .hamburger.in-header {
    top: 27px;
    left: 27px;
  }

  .hamburger.out-header {
    top: 15px;
    left: 20px;
  }

  header {
    margin: 0 0 30px 0;
  }

  h1 {
    font-size: 1.8em;
  }

  nav {
    font-size: 2.75em;
  }

  article {
    margin: 0 0 14px 0;
  }

  .article-content {
    margin: 0 11px 11px 11px;
  }

  h2 {
    font-size: 0.9em;
  }

  footer {
    margin: 4px 0 0 0;
    font-size: 0.8em;
  }
}

@media screen and (min-width: 500px) {
  header {
    margin: 0 0 35px 0;
  }

  h1 {
    font-size: 2em;
  }

  nav {
    font-size: 3.25em;
  }

  h2 {
    font-size: 1.25em;
  }

  footer {
    margin: 7px 0 0 0;
  }
}

@media screen and (min-width: 750px) {
  body {
    font-size: 21px;
  }

  header {
    margin: 0 0 50px 0;
    font-size: 1.6em;
  }

  .header-bg {
    height: 110px;
  }

  .header-content {
    overflow: hidden;
    margin: 20px 20px 0 20px;
    height: 170px;
    border: 5px solid var(--white);
  }

  .hamburger,
  .x {
    display: none;
  }

  h1 {
    margin: 0.4em auto 0.3em auto;
    height: 0.8em;
    font-size: 1.6em;
  }

  h2 {
    margin: 0 0 0.9em 0;
    font-size: 0.7em;
  }

  nav {
    position: relative;
    align-self: end;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    margin: 0;
    padding: 0;
    height: 1.5em;
    border-top: 1px dashed var(--white);
    color: var(--white);
    font-size: 0.6em;
    text-transform: uppercase;
  }

  nav.top {
    background-color: var(--black);
  }

  nav.bottom {
    background-color: var(--black);
  }

  nav ul {
    position: relative;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    display: grid;
    margin: 0;
    border: 0;
    height: 100%;
  }

  .menu-entry {
    margin: 0;
    padding: 6px 0 0 0;
    height: 100%;
  }

  .menu-entry:hover {
    transform: scaleY(1.04);
    padding: 5px 0 0 0;
    text-shadow: 2px 2px #c7b729;
    color: var(--black);
  }

  .menu-entry.top:hover {
    background-color: var(--yellow);
    color: var(--black);
  }

  article {
    height: 110%;
  }

  .article-content {
    margin: 0 20px 100px 20px;
  }

  .article-content.odd {
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  }

  .article-content.even {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 85%);
  }

  .news-picture-container {
    display: inline;
    max-width: 350px;
  }

  .news-picture {
    max-width: 350px;
  }

  .news-text {
    display: inline;
  }

  .news-picture-container.left {
    float: left;
    margin: 0 1em 1em 0;
  }

  .news-picture-container.right {
    float: right;
    margin: 0 0 1em 1em;
  }

  .footer-bg {
    height: 100px;
  }

  .footer-content {
    margin: 0 20px 20px 20px;
    height: 170px;
    border: 5px solid var(--white);
  }

  .footer-credits {
    padding: 0.5em 0.5em;
  }

  .back-to-top.in-footer {
    right: 43px;
    bottom: 43px;
  }

  .back-to-top.out-footer {
    right: 30px;
    bottom: 30px;
  }
}

@media screen and (min-width: 1000px) {
  footer {
    font-size: 0.9em;
  }
}

@media screen and (min-width: 1500px) {
  .back-to-top.in-footer {
    right: 27px;
    bottom: 27px;
  }

  .back-to-top.out-footer {
    right: 27px;
    bottom: 27px;
  }
}