@font-face {
    font-family: "EBGaramond";
    src: url("/fonts/EBGaramond-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Berkeley Mono";
    src: url("/fonts/BerkeleyMono-Regular.woff2") format("woff2");
}

/** Variables **/

:root {
    /* Sizes */
    --sidebar-width: 12em;
    --sidebar-margin: 3em;

    --text-width: 800px;

    /* Colors */
    --canvas-bg: #fff;
    --canvas-color: #000;
    --pre-bg-color: #222;
    --pre-color: #000;
    --border-color: #222;
    --link-color: #f7d060;
    --command-color: #eee;
    --black: #111;
    --white: #eee;
    --accent: #f7d060;
    --dimwhite: #ccc;
    --darkwhite: #7c7b76;

    /* Syntax highlighting color, based on the KWrite theme
       generated by highlight 3.52 (http://www.andre-simon.de/) */
    --highlight-num: #b48ead;
    --highlight-esc: #ebcb8b;
    --highlight-str: #bf0303;
    --highlight-pps: #a3be8c;
    --highlight-slc: #4c566a;
    --highlight-com: #4c566a;
    --highlight-ppc: #eee;
    --highlight-opt: #81a1c1;
    --highlight-ipl: #ebcb8b;
    --highlight-lin: #d8dee9;
    --highlight-kwa: #81a1c1;
    --highlight-kwb: #434c5e;
    --highlight-kwc: #88c0d0;
    --highlight-kwd: #8fbcbb;
    /* highlight theme: Nord */
}

/** Fixups */

/* Avoid elements wider than screen */
img {
    display: inline-block;
    max-width: 100%;
}

pre,
code,
sample {
    white-space: pre-wrap;
    hyphens: none;
}

table {
    max-width: 100%;
}

/* Common styles */

main {
    max-width: var(--text-width);
    margin: auto;
    font-size: 14pt;
}

#copyright {
    text-align: center;
    margin-top: 10px;
}

body {
    background-color: var(--black);
    color: var(--dimwhite);
    font-family: EBGaramond, serif;
    line-height: 150%;
}

details {
    border: 1px solid var(--accent);
    padding: 1em;
    font-family: EBGaramond, serif;
}

summary {
    padding: 0em;
    color: var(--accent);
    font-family:
        Berkeley Mono,
        monospace;
    font-size: 0.9rem;
}

a {
    color: var(--accent);
}

a:visited {
    color: #8f7100;
}

table {
    border-collapse: collapse;
    width: 100%;
    font-family:
        Berkeley Mono,
        monospace;
    font-size: 0.7em;
}

td,
th {
    border: 1px solid var(--dimwhite);
    padding: 0.2em 1em;
}

figcaption {
    font-size: 0.8em;
    color: var(--darkwhite);
    line-height: 1.1em;
}
/* Visual styles */

/* Underlined "link here" #/→ symbols next to headings look quite odd, don't they? */
a.here {
    text-decoration: none;
}

/* Make it clear that the expand/collapse triangle symbol is clickable */
summary {
    cursor: pointer;
}

hr {
    height: 1px;
    background-color: var(--border-color);
    border: 0 none;
    margin: 0;
}

a {
    color: var(--link-color);
}

pre {
    background-color: var(--pre-bg-color);
    padding: 10px;
    border: 1px solid var(--border-color);
}

code,
kbd {
    color: var(--command-color);
    font-family:
        Berkeley Mono,
        monospace;
    font-size: 0.8em;
}

/* ToC hardly needs list bullets. */
ul.toc {
    list-style: none;
}
ul.toc li {
    margin-top: 0.5em;
}

/* Typography */

#book-title {
    font-weight: bold;
    font-size: 200%;
}

#dedication {
    text-align: right;
    font-style: italic;
    width: 100%;
}

@supports (hyphens: auto) {
    main {
        text-align: justify;
        hyphens: auto;
    }
}

pre,
code,
sample {
    white-space: pre-wrap;
    hyphens: none;
}

/* Use a side pane ToC on screens that are wider than they are tall. */

@media (pointer: fine), (orientation: landscape) {
    div#chapters-index {
        width: var(--sidebar-width);
        overflow: scroll;

        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;

        padding-right: 1em;
    }

    main {
        /* Margin wider than the sidebar is intentional,
       so that there's always some space between the sidebar and the content block.
     */
        margin-left: calc(var(--sidebar-width) + var(--sidebar-margin));
    }
}

/** Syntax highlighting */
.hl.num {
    color: var(--highlight-num);
}
.hl.esc {
    color: var(--highlight-esc);
}
.hl.str {
    color: var(--highlight-str);
}
.hl.pps {
    color: var(--highlight-pps);
}
.hl.slc {
    color: var(--highlight-slc);
    font-style: italic;
}
.hl.com {
    color: var(--highlight-com);
    font-style: italic;
}
.hl.ppc {
    color: var(--highlight-ppc);
}
.hl.opt {
    color: var(--highlight-opt);
}
.hl.ipl {
    color: var(--highlight-ipl);
}
.hl.lin {
    color: var(--highlight-lin);
}
.hl.kwa {
    color: var(--highlight-kwa);
    font-weight: bold;
}
.hl.kwb {
    color: var(--highlight-kwb);
}
.hl.kwc {
    color: var(--highlight-kwc);
    font-weight: bold;
}
.hl.kwd {
    color: var(--highlight-kwd);
}

.hl.sng {
    color: #a3be8c;
}
.hl.erm {
    color: #ff0000;
    font-weight: bold;
    border: solid 1px red;
    margin-left: 3em;
}
.hl.err {
    color: #ff0000;
    font-weight: bold;
}
.hl.kwe {
    color: #81a1c1;
}
.hl.kwf {
    color: #8886c4;
}