@media (prefers-color-scheme: light) {
    body { background: #fff; color: #000; }
    a { color: #000; }
    blockquote { background: #eee; }
    .document-header { border: 5px solid #000; }
    .selected-section { background: #000; color: #fff; }
    .document-content { border-top: 2px solid #000; }
}

@media (prefers-color-scheme: dark) {
    body { background: #000; color: #fff; }
    a { color: #fff; }
    blockquote { background: #222; }
    .document-header { border: 5px solid #fff; }
    .selected-section { background: #fff; color: #000; }
    .document-content { border-top: 2px solid #fff; }
    img { filter: invert(); }
}

a {
    font-weight: 500;
}

b {
    font-weight: 700;
}

blockquote {
    padding: 1px 15px;
}

blockquote p {
    margin: 15px 0;
}

p {
    margin: 15px 0;
}

.selected-section {
    display: inline-block;
    padding: 0.1em 0.3em;
}

.flex-spacer {
    flex-grow: 1;
}

body {
    font-family: "Iosevka Aile Web";
    font-size: 20px;
    font-weight: 300;
    margin: 0;
}

.root-container {
    padding: 0.5em;
    display: flex;
    flex-direction: column;
    max-width: 777px;
}

.logo {
    flex: 0 1;
    padding: 0.2em;
    width: 110px;
    height: 110px
}

.page-header {
    display: flex;
    flex-direction: row;
}

.document-header {
    overflow: hidden;
    padding: 0.5em;
    margin: 0.5em;
    height: 72px;
    display: flex;
    flex-direction: column;
}

.document-title {
    flex: 1 0;
    font-weight: 800;
}

.document-id {
    flex: 1 0;
    color: #888;
    font-family: "Iosevka Fixed Web";
}

.section-links {
    flex: 1 0;
    margin-top: 0.5em;
}

.document-content {
    flex: 1 0 100%;
    font-family: "Iosevka Fixed Slab Web";
}