/* Flex column sizing  */
.nav,
.flex-left,
.flex-right {
  display: none;
}

.main {
  padding: 32px 16px;
}

@media (min-width: 370px) {
  .main {
    padding-right: 32px;
    padding-left: 32px;
  }
}

/* Length at which subtitle starts to wrap */
@media (min-width: 720px) {
  .flex-wrapper {
    display: flex;
  }

  .flex-left {
    flex: 2 3 0px;
  }

  .nav {
    flex: 0 1 250px;
    min-width: 220px;
  }

  .main {
    flex: 2 1 800px;
    max-width: 850px;
    display: flex;
    justify-content: center;
  }

  .main .main-content {
    max-width: 700px;
  }

  .flex-right {
    flex: 5 3 0px;
  }

  .nav,
  .flex-left,
  .flex-right {
    display: block;
  }
}

.flex-left,
.nav {
  background-color: var(--brand-nav-background);
}

.nav .nav-content {
  line-height: 1.6;
  /* display: flex;
  justify-content: center; */
}

.nav .nav-content ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
  padding-bottom: 48px;
  /* To align "Back to site" with article title */
  padding-top: 39px;
  /* 10px to match the scrollbar width */
  padding-right: 10px;
  position: fixed;
  /* using top + bottom + overflow enables scroll with position:fixed */
  top: 2px;
  bottom: 2px;
  overflow: hidden;
  overscroll-behavior: contain;
}

.nav .nav-content ul:hover {
  overflow-y: scroll;
  padding-right: 0px;
}

.nav .nav-content li {
  display: block;
  margin: 0px;
  margin-right: 8px;
  margin-left: 4px;
}

.nav .nav-content a {
  color: var(--brand-text);
  text-decoration: none;
  display: block;
  border-radius: 8px 1em 1em 8px;
  padding: 4px 0px 4px 16px;
}

.nav-content a:hover {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}

.nav-content .nav-link:hover {
  background: var(--brand-nav-hover);
}

/* more specificity to override `.nav-content .nav-link:hover` */
.nav .nav-content a.current {
  color: inherit;
  text-decoration: none;
  background: var(--brand-nav-current);
  font-weight: 600;
}

.nav-content li.nav-h1 {
  display: block;
  font-size: 1.2em;
  font-weight: 600;
  margin-top: 24px;
}

.main .main-content a {
  color: var(--brand-link);
  font-weight: 500;
  text-decoration: none;
}

.main .main-content a:hover {
  text-decoration: underline;
}

.main .main-content .main-h3 {
  font-weight: 600;
  display: inline;
}

/* special styling for the initial h1 */
#article-title {
  border-style: none;
  margin-bottom: 0px;
  padding-bottom: 2px;
}
#article-subtitle {
  font-size: 20px;
  font-weight: 500;
  color: var(--brand-subtitle);
  padding-bottom: 20px;
}

/* overwrite github markdown */
.markdown-body h2 {
  border-bottom: none;
  margin-top: 40px;
  margin-bottom: 12px;
}

.main .main-content .main-h3 {
  scroll-margin-top: 16px;
}

.main .main-content h2.nav-anchor {
  scroll-margin-top: 24px;
}

.main .main-content ul {
  padding-left: 20px;
  padding-top: 2px;
}

/* isn't working with scroll event handler
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
*/

html {
  /* Official styles (Firefox) */
  scrollbar-color: var(--brand-scrollbar) hsla(0, 0%, 100%, 0);
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 10px;
  background-color: hsla(0, 0%, 100%, 0);
}

/*
.nav ::-webkit-scrollbar {
  display: none;
}
*/

::-webkit-scrollbar-thumb {
  border-radius: 1000px;
  background-color: var(--brand-scrollbar);
  /* border: 2px solid hsla(0, 0%, 100%, 0);*/
}
/*
  Little bonus: on non-Firefox browsers,
  the thumb will light up on hover!
*/
::-webkit-scrollbar-thumb:hover {
  background-color: var(--brand-scrollbar-hover);
}

.nav::-webkit-scrollbar-thumb {
  display: none;
}