:root {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 17px;

    --font-serif: 'Noto Serif', serif;
    --font-sans-serif: 'Source Sans Pro', sans-serif;
    --font-monospace: 'Cascadia Code', monospace;

    --bg-body: #ffffff;
    --bg-sourceblock: #f2f2f2;
    --bg-sidebar: #000000;
    --fg-text: #000000;
    --fg-heading: #121212;
    --fg-code: #000000;
    --bg-code: var(--bg-sourceblock);
    --fg-link: #0089c7;
    --fg-red: #ff6347;
    --fg-green: #98fb98;
    --fg-yellow: #ebcb8b;
    --fg-blue: #87ceeb;
    --fg-cyan: #40e0d0;

    --fg-builtin: #8f3f71;
    --fg-comment: #9099AB;
    --fg-comment-delimiter: #9099AB;
    --fg-constant: #8f3f71;
    --fg-doc: #79740e;
    --fg-function-name: #b53f71;
    --fg-css-selector: #b53f71;
    --fg-keyword: #9d0006;
    --fg-regexp-grouping-backslash: #5FB3B3;
    --fg-regexp-grouping-construct: #5FB3B3;
    --fg-string: #79740e;
    --fg-css-property: #8FBCBB;
    --fg-type: #8f3f71;
    --fg-preprocessor: #88C0D0;
    --fg-variable-name: #076678;
    --fg-warning: #ff0000;

    --sidebar-width: 30ch;
    --content-padding: 5px 3rem;
    --max-width: 10in;
    --padding-horizontal: .5rem;
}

body {
    background: var(--bg-sourceblock);
    color: var(--fg-text);
    font-family: var(--font-sans-serif);
    min-height: 100vh;
    margin: 0;
    margin-left: var(--sidebar-width);
    padding: 0;
}

#preamble {
    background: var(--bg-sidebar);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: var(--sidebar-width);
}

#preamble .container {
    height: 100%;
    width: 100%;
    font-family: var(--font-monospace);
}

#preamble .user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: .5em;
}

#preamble .user-info img {
    display: block;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

#preamble .user-name {
    font-size: 1.9rem;
    font-weight: bold;
    margin: 0;
    padding: .2em;
    color: var(--fg-blue);
}

#preamble nav ul {
    list-style: none;
    margin: 0;
    padding: .2em;
}

#preamble nav li {
    display: block;
    width: 100%;
    text-decoration: none;
    color: inherit;
    font-size: 1.2em;
    text-align: center;
    line-height: 1.4;
}

#preamble nav li a {
    display: block;
    width: 100%;
    color: #ffffff;
    text-shadow: 2px black;
    font-weight: bolder;
}

#preamble nav li a:hover {
    background: var(--fg-blue);
    color: black;
}

#toggler {
    display: none;
    width: 2em;
    height: 2em;
    background: url(/assets/img/menu.svg) 50% no-repeat;
    background-size: 2em;
    vertical-align: middle;
    cursor: pointer;
    z-index: 100;
    transition: all .45s;
}

@media all and (max-width: 900px) {
    body {
        margin: 0;
    }

    #preamble .user-info img {
        display: none;
    }

    #preamble {
        position: static;
        width: 100%;
    }

    #preamble .container {
        max-width: var(--max-width);
    }

    .user-name {
        display: block;
        flex-basis: 1;
    }

    #preamble .user-info {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    #preamble nav {
        display: none;
    }

    #toggler {
        display: unset;
    }

}

#content {
    background: var(--bg-body);
    margin: 0;
    max-width: var(--max-width);
    min-height: 90vh;
    padding: var(--content-padding);
}

#postamble {
    background: var(--bg-body);
    border-top: 2px dotted var(--fg-comment);
    color: var(--fg-comment);
    font-size: .8rem;
    margin: 0;
    max-width: var(--max-width);
    padding: var(--content-padding);
    text-align: center;
}

@media all and (max-width: 550px) {
    .org-ul li span.timestamp {
        display: block;
    }

    #content {
	padding: 1em;
    }

    #postamble {
	padding: 1em;
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--fg-heading);
    font-family: var(--font-serif);
}

.title {
    font-size: 1.95em;
    margin: .6em 0;
}

.subtitle {
    font: italic normal 300 1.2em var(--font-sans-serif, serif);
}

#content>header:first-child {
    margin-bottom: 3.5em;
}

a {
    color: var(--fg-link);
    text-decoration: none;
}

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

a:hover,
a:visited:hover {
    text-decoration: underline;
}

code {
    background: var(--bg-code);
    border-radius: 5px;
    color: var(--fg-code);
    font: 0.85em var(--font-monospace, monospace);
    padding: .1em .25em;
}

.org-src-container {
    position: relative;
}

pre {
    background: var(--bg-sourceblock);
    font-family: var(--font-monospace);
    font-size: 0.85em;
    overflow: auto;
    margin: 1.2em 0;
    padding: 1rem 1.25rem;
}

pre.src {
    padding-top: 1.2rem;
    border-radius: 10px;
}

.copy-btn {
    display: none;
    position: absolute;
    right: 8px;
    top: 8px;
    background: url(/assets/img/copybtn.svg) 50% no-repeat;
    background-position: 61% 45%;
    background-size: 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    height: 36px;
    width: 33px;
    margin: 0;
    padding: 6px;
    vertical-align: middle;
    z-index: 100;
}

/* Display a copy button when the user hovers over source code blocks */
.org-src-container:hover .copy-btn {
    display: block;
}

/* For syntax highlighting in source code blocks */
.org-doc {
    color: var(--fg-doc);
    font-style: italic;
}

.org-function-name,
.org-css-selector {
    color: var(--fg-function-name);
}

.org-keyword {
    color: var(--fg-keyword);
}

.org-regexp-grouping-backslash {
    color: var(--fg-regexp-grouping-backslash);
    font-weight: bold;
}

.org-regexp-grouping-construct {
    color: var(--fg-regexp-grouping-construct);
    font-weight: bold;
}

.org-string,
.org-css-property {
    color: var(--fg-string);
}

.org-type {
    color: var(--fg-type);
}

.org-preprocessor {
    color: var(--fg-preprocessor);
    font-weight: bold;
}

.org-variable-name {
    color: var(--fg-variable-name);
}

.org-warning {
    color: var(--fg-warning);
    font-weight: bold;
}

.org-builtin {
    color: var(--fg-builtin);
}

.org-comment {
    color: var(--fg-comment);
    font-style: italic;
}

.org-comment-delimiter {
    color: var(--fg-comment-delimiter);
    font-style: italic;
}

.org-constant {
    color: var(--fg-constant);
}

/* Org keywords and tags */
.todo,
.done,
.priority {
    font-family: monospace;
    font-weight: bold;
}

.todo {
    color: var(--fg-red);
}

.done {
    color: var(--fg-green);
}

.priority {
    color: var(--fg-yellow);
}

li {
    padding: 0
}

;

.tag {
    background-color: var(--bg-code);
    font-family: monospace;
    font-size: 80%;
    font-weight: normal;
    padding: 2px;
}

.org-ul {
    list-style: none;
    padding: 0;
}

.org-ul li {
    padding: .5em;
}

.timestamp {
    color: var(--fg-heading);
    margin-right: 2ch;
    font-size: 1em;
}

.timestamp-kwd {
    font-family: var(--font-monospace);
    color: #5f9ea0;
}

.org-right {
    margin-left: auto;
    margin-right: 0;
    text-align: right;
}

.org-left {
    margin-left: 0;
    margin-right: auto;
    text-align: left;
}

.org-center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.underline {
    text-decoration: underline;
}

/* Tables */
table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    border: 0;
}

tbody tr:nth-of-type(even) {
    background: var(--bg-body);
}

tbody tr:nth-of-type(odd) {
    background: var(--bg-body);
}

td,
th {
    vertical-align: top;
}

th.org-right,
th.org-left,
th.org-center {
    text-align: center;
}

td.org-center {
    text-align: center;
}

td.org-right {
    text-align: right;
}

td.org-left {
    text-align: left;
}

caption.t-above {
    caption-side: top;
}

caption.t-bottom {
    caption-side: bottom;
}

dt {
    font-weight: bold;
}

.footpara {
    display: inline;
}

.footdef {
    margin-bottom: 1em;
}

.figure {
    padding: 1em;
}

.figure p {
    text-align: center;
}

.figure img {
    max-width: 100%;
}

.equation-container {
    display: table;
    text-align: center;
    width: 100%;
}

.equation {
    vertical-align: middle;
}

.equation-label {
    display: table-cell;
    text-align: right;
    vertical-align: middle;
}

.inlinetask {
    padding: 10px;
    border: 2px solid gray;
    margin: 10px;
    background: #ffffcc;
}

textarea {
    overflow-x: auto;
}

.linenr {
    font-size: smaller;
}

#org-div-home-and-up {
    text-align: right;
    font-size: 70%;
    white-space: nowrap;
}

.code-highlighted {
    background-color: var(--fg-yellow);
}

.org-info-js_info-navigation {
    border-style: none;
}

.org-info-js_search-highlight {
    background-color: var(--fg-yellow);
    color: #000000;
    font-weight: bold;
}

#org-info-js_console-label {
    font-size: 10px;
    font-weight: bold;
    white-space: nowrap;
}

.org-svg {
    width: 90%;
}

.figure img {
    display: block;
    max-width: 100%;
}

blockquote {
    background: var(--bg-sourceblock);
    border-left: 4px solid var(--fg-green);
    border-radius: 5px;
    font-style: italic;
    margin: 0;
}

blockquote p {
    margin: 0;
    padding: .5em .8em;
}

blockquote p::before {
    content: '\201C';
}

blockquote p::after {
    content: '\201D';
}

#table-of-contents {
    line-height: 1.6;
}

p {
    line-height: 1.4;
}

p.verse {
    margin-left: 3%;
}