/* {{{ Layout */
html, body {
    min-height: 100%;
    height: 100%;
}

body {
    width: 80%;
    margin: 0 auto;
    font-family: "Comic Sans MS";
    display: flex;
    flex-direction: column;
}

header {
    border: solid grey;
    border-width: 0 0 2px;
}
header h1 {
    font-size: 2.7em;
    margin-bottom: 0.2em;
}

main {
    flex-grow: 2;
}

section.footnotes hr:first-child {
    width: 100%;
    border-width: 1.3px;
}

footer {
    height: auto;
    line-height: 1.5;
    display: flex;
    margin: 0.1em 0 0;
    padding: 0.7em 5% 2em;
    background: #f5f5dc82;
}
/* }}} End layout */

/* {{{ General themes */
::selection {
    background-color: #B5D6FC;
}

/* {{{ Links */
a {
    text-decoration: none;
    color: dimgray;
}
a:hover {
    text-decoration: underline;
}
/* }}} End links */

/* {{{ Header links */
@media screen {
    .header-link {
        position: relative;
        display: none;
        width: 0;
    }
    main h2:hover > .header-link,
    main h3:hover > .header-link,
    main h4:hover > .header-link,
    main h5:hover > .header-link,
    main h6:hover > .header-link {
        display: inline;
    }
    .header-link::before {
        content: "\1f517";
        font-size: 0.7em;
        left: -1.2em;
        position: absolute;
        bottom: 0;
        width: 1.3em;
        height: 1.42em;
        display: inline-block;
    }
}
@media print {
    .header-link {
        display: none;
    }
}
/* }}} End header links */

/* {{{ Headers */
main h2 {
    border-bottom: 3px solid lightgray;
    font-size: 2em;
}
main h3 {
    border-bottom: 1.7px solid lightgray;
    font-size: 1.5em;
}
main h4 {
    font-size: 1.17em;
}
main h5 {
    font-size: 1em;
}
main h6 {
    font-size: 0.83em;
}
/* }}} End headers */

hr {
    width: 70%;
    height: 0;
    border: 1px solid pink;
}

ul {
    padding-left: 3.5ch;
}

/* {{{ Blockquote */
blockquote {
    margin-left: 0;
    border-left: 5px solid #959595;
    background: #80808029;
    padding: 0.5em 0 0.5em 1em;
}
blockquote *:first-child {
    margin-top: 0;
}
blockquote *:last-child {
    margin-bottom: 0;
}
/* }}} End blockquote */

/* {{{ Code themes */
pre > code.sourceCode {
    padding-left: 0;
    padding-right: 0;
}
pre.sourceCode {
    margin: 0;
    padding: 0.4em;
}
code {
    padding: 0.1ch 0.3ch;
}
.sourceCode, code {
    background-color: #FDF6E3;
    font-family: "Consolas", "Monaco", monospace;
}

/* {{{ Line numbers */
pre.sourceCode {
    padding-left: 4px;
    margin-left: calc(var(--linenumber-len) * 1ch + 1em);
    border-left: 1px solid #aaa;
    counter-reset: line-number 0;
}

.sourceCode > span {
    position: relative;
    left: calc(var(--linenumber-len) * -1ch - 0.3em);
    counter-increment: line-number;
}
.sourceCode > span > a:first-child * {
    display: none;
}
.sourceCode > span > a:first-child::before {
    content: counter(line-number);
    position: relative;
    left: -1ch;
    text-align: right;
    vertical-align: baseline;
    border: none;
    display: inline-block;
    user-select: none;
    padding: 0 4px;
    width: calc(1ch * var(--linenumber-len));
}
/* }}} End line numbers */

code.sourceCode .kw { color: #2876AC; }
code.sourceCode .dt { color: #A84F57; }
code.sourceCode .pp { color: #9C6600; }
code.sourceCode .st, code.sourceCode .ch { color: #217E77; }

code.sourceCode .dv, code.sourceCode .bn, code.sourceCode .fl { color: #B32469; }
code.sourceCode .ch { color: #DC322F; }
code.sourceCode .co { color: #0B7373; }
code.sourceCode .ot { color: #A57800; }
code.sourceCode .al { color: #CB4B16; font-weight: bold; }
code.sourceCode .fu { color: #286997; }
code.sourceCode .re { }
code.sourceCode .er { color: #D30102; font-weight: bold; }
/* }}} End code themes */

/* {{{ Repl-styled themes */
.repl-frame {
    display: block;
    position: relative;
    padding: 2px;
}
.repl-frame:empty {
    background-color: inherit;
}

.repl-frame:before {
    content: "> ";
    color: #666;
    position: absolute;
    display: inline-block;
    width: 2em;
    left: -1em;
}

.replized-content:empty::before, .quoted-content::before {
    content: "'(";
    color: #666;
}
.replized-content:empty::after, .quoted-content::after {
    content: ")";
    color: #666;
}

.outputized-content {
    display: flex;
    font-family: Monaco, Consolas, 'Courier New', Courier, monospace;
    flex-direction: row;
}

.repl-quote {
    color: #666;
    user-select: none;
}
/* }}} End repl-styled themes */
/* }}} End general themes */

/* {{{ Special elements */
.meta-info::before {
    content: "#:" attr(name) " ";
    color: #666;
}
/* }}} End special elements */

/* vim: set fdm=marker : */