html.light-dark {
    color-scheme: light dark;

    @media (prefers-color-scheme: dark) {
        img.light {
            display: none;
        }
    }

    @media (prefers-color-scheme: light) {
        img.dark {
            display: none;
        }
    }
}

html.dark {
    color-scheme: dark;

    img.light {
        display: none;
    }
}

html.light {
    color-scheme: light;

    img.dark {
        display: none;
    }
}

.theme-toggle {
    all: unset;
    cursor: pointer;
}

.theme-toggle svg {
    height: 1.5em;
    padding: 20px;
    fill: var(--fg1);
}

.logo {
    height: 4em;
    display: inline;
    width: auto;
}

main {
    max-width: 1024px;
    padding-left:  7%;
    padding-right: 7%;
}

 /* Style the list */
ul.breadcrumbs {
  padding: 0;
  list-style: none;
  background-color: var(--bg1);
}

/* Display list items side by side */
ul.breadcrumbs li {
  display: inline;
  font-size: 18px;
}

/* Add a slash symbol (/) before/behind each list item */
ul.breadcrumbs li+li:before {
  padding: 8px;
  /* color: black; */
  content: "/\00a0";
}

ul.faqs {
  padding: 0px;
}

ul.faqs li {
  padding: 10px 0px;
  list-style: none;
  font-size: 18px;
}

blockquote {
  background: var(--bg3);
  border-left: 10px solid var(--fg2);
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D";
}
blockquote:before {
  color: var(--fg2);
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote > p:first-child {
  display: inline;
}
blockquote .attribution {
    text-align: end;
}

.navbar {
    max-width: 1024px;
    margin: auto;
    padding-left:  7%;
    padding-right: 7%;
    align-content: center;
}

.footer-nav {
    width: 100%;
    display: flex;
    align-items: stretch;
}

.footer-nav .next,
.footer-nav .prev {
    width: 50%;
    margin: 10px;
    padding: 10px;
    background-color: var(--bg2);
    border: 2px solid var(--fg2);
    border-radius: 4px;
    align-content: center;
}

.hidden {
    visibility: hidden;
}

figcaption {
    text-align: start;
}