body > header {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;

  /*
     The negative margin, is basically just removing the body's margin
     so we can place the entire <header> at the very top and give it a different bgcolor.
     1) It prevents to wrap all the page in a div just to do that
     2) (Hopefully) makes the entire HTML simpler
     3) Downside: It MUST stay in sync with the body's margin.
     Better ideas welcome ;).
  */
  margin: calc(-1 * var(--spacing-small));
  margin-bottom: var(--spacing-small);
  padding: var(--spacing-small);
  background-color: var(--color-background-inverse);
}
  @media screen and (min-width: 60rem) {
    body > header {
      display: flex;
      margin: calc(-1 * var(--spacing-large));
      margin-bottom: var(--spacing-large);
      padding: var(--spacing-medium) var(--spacing-larger);
    }
  }

  body > header * {
    color: var(--color-foreground-inverse);
  }
  /* Turn off the animation on the links, which are done using box shadow. */
  body > header a,
  body > header a:hover {
    box-shadow: none;
  }
  body > header a.sitename {
    display: inline-block;
    text-align: center;
    font-size: var(--font-size-larger);
    font-weight: bold;
  }
  body > header .sitename .subtitle {
    display: block;
    font-size: var(--font-size-small);
    font-weight: normal;
    white-space: nowrap;
  }
  @media screen and (max-width: 60rem) {
    body > header.sitename {
      margin-top: var(--spacing-larger);
      margin-bottom: 0;
      flex: 1;
    }
    body > header a.sitename {
      display: block;
    }
  }

  /** make the menu items seem clicked, when on the according page **/
  body.page-home > header nav.primary a.kata,
  body.page-blog > header nav.primary a.blog,
  body.page-kata > header nav.primary a.kata,
  body.page-about > header nav.primary a.about {
    text-decoration: underline;
  }

nav.primary a,
nav.secondary a {
  text-decoration: none;
}
nav.primary a:hover,
nav.secondary a:hover {
  text-decoration: none;
}
nav .highlight a {
  border: 1px solid var(--color-foreground-highlight);
  border-radius: var(--border-radius-small);
}
nav .highlight a {
  border-color: var(--color-foreground-highlight-4th);
}


nav.primary {
  max-height: 30rem;
  display: none;
}
  nav.primary li * {
    color: var(--color-foreground-inverse);
    font-size: var(--font-size-large);
    font-weight: bold;
    padding: var(--spacing-large);
  }
  nav.primary ul {
    margin: 0;
    list-style-type: none;
  }
  nav.primary li {
    display: inline;
    margin-bottom: var(--spacing-medium);
  }
  @media screen and (min-width: 60rem) {
    nav.primary {
      display: inline-block;
    }
  }


nav.secondary {
  position: fixed;
  bottom: 0;
  left: 0;
  margin: 0;
  right: auto;
  padding: var(--spacing-big);
  background-color: var(--color-foreground-highlight-2nd);
  border-radius: 50%;
}
  nav.secondary .menu-button {
    text-align: center;
  }
  nav.secondary ul {
    list-style-type: none;
    height: 0;
    width: var(--spacing-big);
    margin: 0;
    transition: width 0.2s, height 0.2s, opacity 1s; /* transition when the mouse leave */
    opacity: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  nav.secondary:hover ul {
    padding: var(--spacing-bigger); /* move the clickable first menu item out of focus when clicking on the menu-button (hamburger icon) */
    height: 11rem;
    width: 8rem;
    transition: height 0.2s, opacity 0s; /* transition when the mouse enter */
    transition-delay: 0.2s; /* allows the width to jump to full width first */
    opacity: 1;
  }
  nav.secondary:hover {
    border-radius: 0;
  }
  nav.secondary:hover .menu-button {
    visibility: hidden;
  }
  nav.secondary ul li {
    list-style: none;
    padding: var(--spacing-small);
    text-align: center;
    flex: 1;
    font-size: 1.5rem;
  }

  @media screen and (min-width: 60rem) {
    nav.secondary {
      left: auto;
      top: auto;
      right: 0;
      bottom: 0;
    }
  }