@font-face {
    font-family: "Switzer";
    src: url("../../../assets/fonts/Switzer-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Switzer";
    src: url("../../../assets/fonts/Switzer-VariableItalic.woff2") format("woff2");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Outfit";
    src: url("../../../assets/fonts/Outfit-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

html,
body {
    background: var(--bg);
    color: var(--fg);
    font-family: "Switzer", system-ui, sans-serif;
}

body,
.content,
#content,
.page,
.page-wrapper {
    background: var(--bg);
}

.sidebar,
.sidebar-scrollbox,
.chapter,
#sidebar-toggle,
#menu-bar,
.menu-bar,
.nav-chapters {
    background: var(--sidebar-bg);
    color: var(--sidebar-fg);
}

.content main {
    color: var(--fg);
    font-family: "Switzer", system-ui, sans-serif;
    font-size: 16px;
}

h1,
h2,
h3,
h4,
h5,
h6,
.header,
.chapter li.part-title,
.menu-title {
    color: var(--fg);
    font-family: "Outfit", "Switzer", system-ui, sans-serif;
    letter-spacing: -0.01em;
    font-weight: 500;
}

a,
a:visited,
.content a,
.chapter li a.active,
.chapter li a:hover,
.menu-title,
.nav-chapters:hover {
    color: var(--links);
}

.icon-button:hover,
.icon-button:focus,
#sidebar-toggle:hover,
#sidebar-toggle:focus {
    color: var(--icons-hover);
    background: var(--theme-hover);
}

code,
pre,
.hljs {
    background: var(--sidebar-bg);
    color: var(--fg);
}

:not(pre) > code {
    color: var(--inline-code-color);
    background: var(--theme-hover);
}

blockquote {
    background: var(--quote-bg);
    border-color: var(--quote-border);
}

/*
  Tufte-style margin notes for mdBook chapters (wip).
   Usage:
   <label for="sn-id" class="margin-toggle sidenote-number"></label>
   <input type="checkbox" id="sn-id" class="margin-toggle" />
   <span class="sidenote">Note text.</span>

   Use .marginnote instead of .sidenote for an unnumbered note.

   TODO: syntax extension for markdown
   TODO: alignment/collapsible
   TODO: give this its own file (tufte-note.css?) and import it
*/
.content main {
    counter-reset: sidenote-counter;
}

.sidenote,
.marginnote {
    clear: right;
    float: right;
    width: 16rem;
    margin-right: -18rem;
    margin-bottom: 0.7rem;
    color: color-mix(in srgb, var(--fg) 78%, transparent);
    font-size: 12px;
    line-height: 1.35;
}

.footnote-definition,
.footnote-definition p {
    font-size: 15px;
    line-height: 1.4;
}

.sidenote-number {
    counter-increment: sidenote-counter;
}

.sidenote::before,
.sidenote-number::after {
    color: var(--links);
    content: counter(sidenote-counter);
    font-feature-settings: "sups";
    font-size: 0.75rem;
    vertical-align: super;
}

.sidenote::before {
    margin-right: 0.35rem;
}

.sidenote-number::after {
    cursor: pointer;
    margin-left: 0.15rem;
}

.margin-toggle {
    display: none;
}

.marginnote code,
.sidenote code {
    font-size: 0.75rem;
}

@media (max-width: 1200px) {
    .sidenote,
    .marginnote {
        float: none;
        width: auto;
        margin: 0.7rem 0;
        padding: 0.75rem 1rem;
        background: var(--quote-bg);
        border-left: 0.18rem solid var(--quote-border);
    }
}