:root {
  /*
    Color schemes
  */
  color-scheme: light dark;
  --prickly-pear-yellow: #735f02;
  --eclipse-gray: #3a3a3a;
  --pumpkin-olive: #59521c;
  --manhattan-steel-blue: #224553;
  --pine-green: #36581d;
  --brown-swiss-calf-brown: #543c21;
  --ear-tag-red: #67160e;
  --flaming-gorge-blue: #1b3e5a;
  --hayyard-green: #355322;
  --coeurdalene-purple: #1b245a;
  --brown-swiss-cow-brown: #563c1f;
  --buffalo-blue: #0b496a;
  --saddle-blue: #104165;
  --brown-swiss-gray: #eaddca;

  /*
    Fonts
  */
  --font-family-antique: Superclarendon, "Bookman Old Style", "URW Bookman",
    "URW Bookman L", "Georgia Pro", Georgia, serif;
  --font-family-slab-serif: Rockwell, "Rockwell Nova", "Roboto Slab",
    "DejaVu Serif", "Sitka Small", serif;
  --font-family-system-ui: system-ui, sans-serif;
}

/*
  Default element styles (for small screens)
*/

html {
  background-color: light-dark(var(--brown-swiss-gray), var(--eclipse-gray));
  font-family: var(--font-family-slab-serif);
}

header {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

nav {
  display: flex;
  flex-direction: row;
  overflow: scroll;
  padding-bottom: 1rem;
  position: sticky;
  top: 0;
}

/*
  Container-type helper classes
*/
.row {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/*
  Desktop screen size adjustments
*/
@media (min-width: 768px) {
  /*
    Default element styles
  */
  nav {
    flex-direction: column;
    padding-right: 1rem;
    padding-bottom: 0;

    /*
      Workaround for Chrome always showing scrollbar even when scrolling not needed
    */
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  /*
    Continued Chrome workaround
  */
  nav::-webkit-scrollbar {
    display: none;
  }

  /*
    Container-type helper classes
  */
  .row {
    flex-direction: row;
  }
} /* end @media */