* {
    box-sizing: border-box;

    --font-color-default: #33312e;
    --font-color-secondary: #646057;
    --font-color-link: #a11;
    --font-color-wikilink: rgba(170, 17, 17, 0.08);
    --font-color-link-hover: rgb(210, 17, 17);
    --font-color-wikilink-hover: rgba(170, 17, 17, 0.16);

    --font-faamily-reading: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, ui-serif, Georgia, serif;
    --font-family-code: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
    --font-size-reading: 1em;
    --font-size-code: 1em;

    --background-color-page: #fcf9f4;
    --border-color: #ece7de;
}

html {
    /* font-size: 16px; */
}

body {
    margin: 0 auto;
    color: var(--font-color-default);
    background-color: var(--background-color-page);
}

.sidebar {
    font-family: var(--font-family-code);
    font-size: 0.8em;
}

@media screen and (max-width: 768px) {    
    .sidebar {
        line-height: 1.5em;

        margin: 1em;
        padding-bottom: 2em;
    }

    header {
        border-bottom: var(--font-color-secondary) solid 1px;

        padding-left: 17em;
        padding-bottom: 0.5em;
    }

    .logo {
        position: absolute;
        top: 1em;
        left: 1.5em;
        font-size: 0.6em;
        line-height: 0.9em;
        white-space: pre;
    }

    nav {
        text-align: right;
    }

    main {
        margin: 0 1em;
    }

    main.home {
        height: calc(100vh - 22em);
        /* height: calc(100dvh - 2em); */
        padding: 1em;
    }
    
    footer {
        margin-left: 0.8em;
        margin-top: -5em;
        text-align: left;
    }

}

@media screen and (min-width: 769px) {
    body{
        padding: 24px 24px 24px 336px;
    }

    .sidebar {
        position: fixed;
        top: 24px;
        left: 24px;
        width: 284px;
        height: calc(100vh - 120px); /* fall back */
        height: calc(100dvh - 48px);
        
        border-right: var(--font-color-secondary) solid 1px;
        padding-right: 24px;
        text-align: right;
    }

    .logo {
        font-size: 0.8em;
        white-space: pre;
        margin-bottom: 6em;
    }

    main.home {
        height: calc(100vh - 120px);
        height: calc(100dvh - 48px);
        padding: 24px;
    }

    footer {
        display: inline-block;
        position: absolute;
        bottom: 0;
        right: 24px;
    }

}

code[class*="language-"],
pre[class*="language-"] {
    font-family: var(--font-family-code);
    font-size: var(--font-size-code);
    text-shadow: none;
    font-size: 0.9em;
}

pre[class*="language-"] {
    background-color: var(--border-color);
    border-radius: 0;
    padding: 0.6em;
}

code {
    background-color: var(--border-color);
}

main a {
    text-decoration: none;
    color: var(--font-color-link);
    font-weight: 100;
}

main a::after {
    content: "";
    display: inline-block;
    height: 1em;
    width: 1.2em;
    background: url(/assets/imgs/box-arrow-up-right.svg);
    background-position: right;
    background-repeat: no-repeat;
}

main a:hover::after {
    background: url(/assets/imgs/box-arrow-up-right-hover.svg);
    background-position: right;
    background-repeat: no-repeat;
}

main a:hover {
    color: var(--font-color-link-hover);
}

main a[href^="/"], 
main a[href^="#"] {
    font-family: var(--font-faamily-reading);
    color: var(--font-color-default);
    border-bottom: var(--font-color-link) solid 1px;
    background-color: var(--font-color-wikilink);
}

main a[href^="/"]::after, 
main a[href^="#"]::after {
    display: none;
}

main a[href^="/"]:hover, 
main a[href^="#"]:hover {
    color: var(--font-color-default);
    background-color: var(--font-color-wikilink-hover);
}

.sidebar a {
    text-decoration: none;
    color: var(--font-color-default);
}

nav a:hover {
    color: var(--font-color-link-hover);
}

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

nav {
    line-height: 1.5em;
}

.img-tag {
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
}

.rss {
    background-image: url("/assets/imgs/rss.svg");
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 0.2em;
}

.alter-ego {
    background-image: url("/assets/imgs/lightning.svg");
    background-size: contain;
    background-size: no-repeat;
    size: 1em;
    margin-left: 0.2em;
}

.social-media li {
    display: inline-block;
}

.social-media img {
    width: 1.5em;
}

main {
    font-family: var(--font-faamily-reading);
    line-height: 1.5em;
}

main.blog, 
main.reading, 
main.projects, 
main.about, 
main.stubs {
    max-width: 600px;
    max-width: 80ex;
}

main.home {
    overflow-x: hidden;
    color: #ffffff;
    line-height: 1em;

    background-image: url("/assets/imgs/epiphyllum-dithered.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

main.projects {

}