@font-face {
    font-family: "Inter";
    src: url("../font/inter-var.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../font/inter-var-i.woff2") format("woff2");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

body {
    font-family: "Inter", Arial, sans-serif;
    font-size: 1em;
}

#reader-head {
    text-align: center;
    max-width: 95%;
    margin: auto;
    padding-bottom: 1rem;
}

#box-heading {
    color: #000;
    text-align: center;
    width: 70%;
    margin: auto;
    margin-bottom: 1rem;
}

.content-box {
    background-color: #e8e5e8;
    width: 90%;
    margin: auto;
    padding: 1rem;
    text-align: left;
    max-width: 60ch;
}

.chapter-nav {
    width: 60%;
    justify-content: left;
    max-width: 60ch;
    
}

body.dark .chapter-nav a {
    color: #eee;
}

#dark-mode-toggle {
    background-color: #111;
    color: #eee;
    padding: 0.3rem;
}

body.dark {
    background-color: #111;
    color: #eee;
}

body.dark #reader-head {
    color: #fff;
}

body.dark .chapter-nav a {
    color: #eee;
}

body.dark .content-box {
    background-color: #333333; /* optional */
}

body.dark #dark-mode-toggle {
    background-color: #eee;
    color: #111;
    padding: 0.3rem;
}

body.dark a {
    color: #b9ebff;
}

body.dark .content-note {
    background-color: #333;
    border-left-color: #555;
    color: #ddd;
}

body.dark .content-note summary {
    color: #fff;
}

#twelve-intro {
    border-left: 2px solid #999;
    padding: 0.2rem 0.5rem;
    margin: 0.2rem 0;
    background-color: #f9f9f9;
    color: #222;
    font-size: 0.9rem;
}

#twelve-intro summary {
    color: #000;
}

#twelve-intro summary::marker {
    font-size: 0.8rem;
    font-style: normal;
}

.lead-in-caps {
    font-variant-caps: small-caps;
}

body.dark #twelve-intro {
    background-color: #333;
    border-left-color: #555;
    color: #ddd;
}

body.dark #twelve-intro summary {
    color: #fff;
}

/*  content-note refers to the expandable tool tips */

.content-note {
    border-left: 2px solid #999;
    padding: 0.2rem 0.5rem;
    margin: 0.2rem 0;
    background-color: #f9f9f9;
    font-size: 0.9rem;
    color: #222;
}

.content-note summary::marker {
    /*content: '▸';*/
    font-size: 0.8rem;
    font-style: normal;
}

.content-note summary {
    font-style: italic;
    color: #000;
    /*cursor: pointer;
    list-style: none;  removes default disclosure triangle in some browsers */
}

/*.content-note[open] summary::marker {
    font-size: 0.8rem;
    content: '▾'; points down when open 
}*/