/* Page layout */
.main {
  --padding-x-main: 32px;
  padding: 32px var(--padding-x-main) 32px var(--padding-x-main);
}
.main .main-content {
  max-width: 700px;
  margin: auto;
}
@media (max-width: 549px) {
  .main {    
    --padding-x-main: 16px;
  }
}

/* Default colors */
:root {
  --brand-text: hsl(33, 6%, 13%);
  --brand-subtitle: hsl(210, 4%, 50%);
  --brand-link: hsl(36, 70%, 45%);

  --brand-scrollbar: hsl(33, 50%, 80%);
  --brand-scrollbar-hover: hsl(33, 50%, 70%);

  /* Only used in left-sidebar-with-nav.css */
  --brand-nav-background: hsl(33, 90%, 93%);  
  --brand-nav-hover: hsl(33, 100%, 90%);
  --brand-nav-current: hsl(33, 100%, 84%);

  /* Only used in giving-and-taxes.css (advanced strategies) */
  --brand-toc-background: hsl(33, 94%, 95%);
  --brand-cutout-background: hsl(33, 40%, 96%);
}

/* Special styling for the initial h1 */
#article-title {
  border-style: none;
  margin-bottom: 0px;
  padding-top: 8px;
  padding-bottom: 2px;
}
#article-subtitle {
  font-size: 20px;
  font-weight: 500;
  color: var(--brand-subtitle);
  padding-bottom: 20px;
  /* Only shows up if the div is non-empty 
  margin-bottom: 2px; */
}
@media (max-width: 549px) {
  #article-title {
    padding-top: 0px;
  }
}

#footnotes-hr {
  margin-top: 40px;
}

#signoff {
  padding-top: 12px;
}

/* Heading, text, and paragraph tweaks to github markdown */
.markdown-body h2 {
  border-bottom: none;
  margin-top: 40px;
  margin-bottom: 12px;
}

.markdown-body h4 {
  font-size: 1.1em;
}

/* Lists

If you have
A. list item
  i. list item 
  ii. list item 
B. list item
  i. list item

The below makes the gaps between Aii, B, and Bi the same.
That gap is a bit smaller than the gap between Ai and Aii.
I could imagine fiddling with these depending on the context.
*/
.main .main-content ul {
  padding-left: 20px;
  padding-top: 4px;
}

/* Copied from github-markdown.css; could
be changed to padding-top to match the others */
.main .main-content li + li {
  margin-top: 4px;
}

.main .main-content li + ul {
  padding-top: 2px;
  padding-bottom: 2px;
}

.main .main-content p + ul {
  margin-top: -16px;
}

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

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

/* Should we add a scroll-anchor-top? */

/* Scrollbars */
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);
}

::-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);
}