@charset "UTF-8";
:root {
    --redrose: #321b19;
    --redderrose: #712b2a;
    --wall: #626059;
    --whiterose: #dee3e7;
    --pinkrose: #c3b7b9;
    --pinkshadow: #753239;
    --leaf: #3b463d;
    --leaf2: #454e4e;
    --creamrose: #efede4;
    --table: #352f29;

    --purple: #513889;
    --pink: #e4b3d0;
    --periwinkle: #8d84bb;
    --skyblue: #b2d9f6;
}

body {
    background-color: var(--creamrose);
    color: var(--leaf);
}

/** quotes **/
blockquote {
    font-style: italic;
    max-width: 20em;
}

img {
    float: left;
    margin-right: 0.3em !important;
}

/** marginalia **/
.aside {
    max-height: 20vh;
    overflow: auto;
    display: inline;
    float: right;
    position: relative;
    max-width: 25em;
    margin: 4px;
}

@media (max-width: 700px) {
    .aside {
        display: block;
        float: none;
        margin: 5% 10% 5% 10%;
        max-width: 80%;
        max-height: 20vh;
        overflow:auto;
    }
}

.aside * {
    margin: 0 0 0.3em 0;
}

header {
    max-width: 40em;
    width: 100%;
    margin: auto;
    text-align: left;
    color: var(--leaf);
}

footer {
    max-width: 40em;
    width: 100%;
    margin: auto;
    text-align: left;
    color: var(--leaf);
}

a {
    text-decoration: underline;
    color: var(--redderrose);
}


/** zola main content **/
.section {
    max-width: 40em;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: left;
}


/** bordered **/
.boxed {
    border: 2px solid black;
    padding: 0.5em;
    margin-top: 0.3rem;
    margin-bottom: 0.3rem;
}

/** highlight */
::selection {
    background: var(--redderrose);
    color: var(--pinkrose);
}

/** links */
a:hover, a:focus, a:visited, a:active {
    color: var(--wall);
}

/** zola code block **/
pre {
    display: flex;
    padding: 0.5em;
}
/** TODO the scrollbar covers the bottom line of the code block :( **/
pre[class^='language'] code {
    overflow: scroll;
    scrollbar-gutter: stable;
}