custom-nav {
  display: contents;
}

html {
  /* Light Mode Colours */
  /* --olive: #8e8d66;
  --beige: #f7e9ce;
  --mustard: #e6b055;
  --orange: #c17b52;
  --brown: #5a4a3c; */

  /* BG */
  --athens-grey: #f2f2f3;
  /* Light Accent */
  --danube: #5599cb;
  /* Main brand Colour */
  --hippe-blue: #5598b9;
  /* Occasional Accent */
  --fedora: #766773;
  /* Text col */
  --dark-shades: #2f2f32;

  /* Dark Mode Colours */
  --lightDark: #20201c;
}

html.light-mode {
  /* --score-tag-highlight: #ffd400; */
  --score-tag-highlight: rgb(85, 152, 185);

  --bg: var(--athens-grey);
  --bg2: var(--hippe-blue);
  --highlight: var(--fedora);
  --text-col: var(--dark-shades);
  --tag-col:var(--danube)
}

html.dark-mode {
  /* --score-tag-highlight: #ffd400; */
  --score-tag-highlight: #766773;

  /* --bg: var(--beige); */
  --bg: var(--dark-shades);
  --bg2: var(--lightDark);
  --highlight: var(--orange);
  --text-col: white;
  --tag-col:var(--lightDark)
}

body {
  background-color: var(--bg);
  color: var(--text-col);
  transition: color 1s, background-color 1s;
  font-family: Verdana;

  display: flex;
  flex-direction: row;

  margin: 0;
  padding: 8px;
  /*height: 100vh;*/
  box-sizing: border-box;
}

.content {
  flex: 1;
}

html.light-mode {
  .mode-select.light-mode {
    display: none;
  }
  .mode-select:hover {
    color: var(--athens-grey);
  }
}

html.dark-mode {
  .mode-select.dark-mode {
    display: none;
  }
}

html.dark-mode {
  .menu {
    a {
      background: none;
      text-decoration: underline;
    }
  }
  .mode-select:hover {
    color: var(--fedora);
  }
}

.menu {
  transition: all 1ms;
  min-width: 6rem;
  flex: 0.1;
  padding: 0.5rem;
  background-color: var(--bg2);
  transition: background-color 1s;

  a {
    color: var(--text-col);
    text-decoration: underline;
    /* background: var(--highlight); */
    margin-top: 1rem;
    padding-left: .6rem;
    display: block;
    transition: padding-left 0.6s ease-in-out, text-decoration 0.6s ease-in-out, color 1s;
  }

  a:not(.active):hover {
    font-style: italic;
    padding-left: 1.2rem;
  }

  a.active {
    /* color: var(--disabledCol, grey); */
    font-weight: bold;
    pointer-events: none;
    padding-left: 1.2rem;
    transition: color 1s;
  }

  .mode-select {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-col);
    height: 2rem;
    transition: color 1s;
  }
}

@media (min-device-width:601px) {
  .content {
    margin-left: 0.6rem;
  }

  .mode-select {
    width: 100%;
    margin-top: 1rem;
  }
}

@media (max-device-width:600px) {
  html {
    font-size: 2rem;
  }
  body {
    flex-direction: column;
  }

  .menu {
    flex: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    a {
      margin-top: 0;
    }

    a, a:not(.active):hover {
      padding-left: 0;
    }

    a.active {
      padding-right: 1.6rem;
    }

    .mode-select {
      margin-top: -.5rem;
      margin-bottom: -.5rem;
    }
  }
}