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

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

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