:root {
  --navbar-background-color: #36383F;
  --navbar-color: #FFFFFF;
  --navbar-color-hover: #85888C;
  --navbar-height: 60px;
  --navbar-padding: 1rem;
  --navbar-transition-duration: 0.5s;
}

/* Navbar */

.navbar {
  background-color: var(--navbar-background-color);
  color: var(--navbar-color);
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1000;
  height: var(--navbar-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar .logo {
  padding: 0 var(--navbar-padding);

  /* prevent hover background on mobile (see https://stackoverflow.com/a/21003770) */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.navbar a {
  text-decoration: none;
  color: var(--navbar-color);
  transition: color var(--navbar-transition-duration);
}

.navbar a:hover {
  color: var(--navbar-color-hover);
}

/* Nav (desktop) */

nav a {
  display: block;
  padding: 0 var(--navbar-padding);
}

/* Toggle button (desktop) */

#toggle-menu-state {
  display: none;
}

label[for=toggle-menu-state] {
  display: none;

  /* prevent hover background on mobile (see https://stackoverflow.com/a/21003770) */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

label[for=toggle-menu-state]:focus {
  outline: none !important;
}

nav {
  display: flex;
}

@media (max-width: 768px) {

  /* Nav (mobile) */
  nav {
    width: 100%;
    height: 100%;
    position: fixed;
    top: var(--navbar-height);
    overflow: hidden;
    background-color: var(--navbar-background-color);
    max-height: 0;
    transition: max-height .5s ease-out;
    flex-direction: column;
  }

  nav a {
    text-align: center;
    padding: var(--navbar-padding);
  }

  #toggle-menu-state:checked ~ nav {
    max-height: 100%;
  }

  /* Toggle button (mobile) */
  label[for=toggle-menu-state] {
    display: block;
    cursor: pointer;
    padding: 0 var(--navbar-padding);
  }

  /* Toggle button icon (mobile) */
  .toggle-menu-line {
    background: var(--navbar-color);
    display: block;
    height: 4px;
    position: relative;
    width: 24px;
  }

  .toggle-menu-line::before,
  .toggle-menu-line::after {
    background: var(--navbar-color);
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
  }

  .toggle-menu-line::before {
    top: 8px;
  }

  .toggle-menu-line::after {
    top: -8px;
  }

  #toggle-menu-state:checked ~ label[for=toggle-menu-state] .toggle-menu-line {
    background: transparent;
  }

  #toggle-menu-state:checked ~ label[for=toggle-menu-state] .toggle-menu-line::before {
    transform: rotate(-45deg);
    top: 0;
  }

  #toggle-menu-state:checked ~ label[for=toggle-menu-state] .toggle-menu-line::after {
    transform: rotate(45deg);
    top: 0;
  }
}