@import url(https://fonts.bunny.net/css?alegreya-sans:400,700);
    @import url(https://fonts.bunny.net/css?alegreya-sans-sc:400,700);
    @import url(https://fonts.bunny.net/css?family=alegreya:400,700);
    @import url(https://fonts.bunny.net/css?family=alegreya-sc:400,700);

    :root {
        --nord0-polar-night1: #2e3440;
        --nord1-polar-night2: #3b4252;
        --nord2-polar-night3: #434c5e;
        --nord3-polar-night4: #4c566a;
        --nord4-snow-storm1: #d8dee9;
        --nord5-snow-storm2: #e5e9f0;
        --nord6-snow-storm3: #eceff4;
        --nord7-frost1: #8fbcbb;
        --nord8-frost2: #88c0d0;
        --nord9-frost3: #81a1c1;
        --nord10-frost4: #5e81ac;
        --nord10-frost4-darker: #385070;
        --nord11-aurora-red: #bf616a;
        --nord12-aurora-orange: #d08770;
        --nord13-aurora-yellow: #ebcb8b;
        --nord14-aurora-green: #a3be8c;
        --nord15-aurora-purple: #b48ead;
        --nord15-aurora-purple-darker: #65435F;

        --width: 720px;
        --hfooter: 40px;
        --font-main: Alegreya, serif;
        --font-secondary: Alegreya Sans, sans-serif;
        --font-scale: 15pt;

        /* light theme*/
        --background-color: var(--nord6-snow-storm3);
        --heading-color: var(--nord0-polar-night2);
        --text-color: var(--nord0-polar-night1);
        --link-color: var(--nord10-frost4-darker);
        --visited-color: var(--nord15-aurora-purple-darker);
        --code-background-color: var(--nord5-snow-storm2);
        --code-color: var(--text-color);
        --blockquote-color: var(--nord5-snow-storm2);
    }

    @media (prefers-color-scheme: dark) {
        :root {
            --background-color: var(--nord0-polar-night1);
            --heading-color: var(--nord6-snow-storm3);
            --text-color: var(--nord6-snow-storm3);
            --link-color: var(--nord8-frost2);
            --visited-color: var(--nord15-aurora-purple);
            --code-background-color: var(--nord1-polar-night2);
            --code-color: var(--text-color);
            --blockquote-color: var(--nord2-polar-night3);
        }
    }

    body {
        font-family: var(--font-main);
        font-size: var(--font-scale);
        margin: auto;
        padding: 20px;
        max-width: var(--width);
        text-align: left;
        background-color: var(--background-color);
        word-wrap: break-word;
        overflow-wrap: break-word;
        line-height: 1.5;
        color: var(--text-color);
        min-height: calc(100vh - var(--hfooter));
        display: flex;
        flex-direction: column;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: var(--font-main);
        color: var(--heading-color);
        font-variant: small-caps;
    }

    h1 {
        font-size: 1.8em;
    }

    h2 {
        font-size: 1.5em;
    }

    h3 {
        font-size: 1.3em;
    }

    h4 {
        font-size: 1.1em;
    }

    h5 {
        font-size: inherit;
        font-variant: inherit;
        font-weight: 700;
    }

    h6 {
        font-variant: inherit;
        font-size: inherit;
        font-style: oblique;
        font-weight: 400;
    }

    .u-photo {
        max-width: 20%;
        min-width: 100px;
        margin-left: 0.5em;
        float: right;
        border-color: var(--code-color);
        border-style: solid;
        border-width: thin;
        border-radius: 5px;
    }

    a.title {
        color: var(--text-color);
        font-size: larger;
        font-weight: 700;
        text-decoration-line: overline;
        font-variant: small-caps;
        font-family: var(--font-secondary);
    }

    a.subtitle {
        color: var(--text-color);
        font-size: larger;
        font-weight: 700;
        font-variant: small-caps;
        font-family: var(--font-secondary);
    }

    a.title:hover {
        text-decoration-line: overline;
    }

    a.subtitle:hover {
        text-decoration: none;
    }

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

    a:hover {
        text-decoration: underline;
    }

    nav a {
        margin-right: 10px;
    }

    strong,
    b {
        color: var(--text-color);
    }

    button {
        margin: 0;
        cursor: pointer;
    }

    time {
        font-family: monospace;
        font-style: normal;
        font-size: 15px;
    }

    main {
        flex: 1;
        line-height: 1.6;
    }

    table {
        width: 100%;
    }

    hr {
        border: 0;
        border-top: 1px dashed;
    }

    img {
        max-width: 100%;
    }

    code {
        padding: 1px;
        font-style: monospace;
        font-size: 0.8em;
        background-color: var(--code-background-color);
    }

    pre code {
        color: var(--code-color);
        background-color: var(--code-background-color);
        display: block;
        padding: 20px;
        white-space: pre-wrap;
        overflow-x: auto;
        border-color: var(--code-color);
        border-style: solid;
        border-width: thin;
        border-radius: 5px;
    }

    div.highlight pre {
        background-color: initial;
        color: initial;
        border-color: var(--code-color);
        border-style: solid;
        border-width: thin;
        border-radius: 5px;
    }

    div.highlight code {
        background-color: unset;
        color: unset;
        border-color: var(--code-color);
        border-style: solid;
        border-width: thin;
        border-radius: 5px;
    }

    blockquote {
        margin: 0px;
        padding-left: 20px;
        padding-right: 10px;
        padding-top: 0.5px;
        padding-bottom: 0.5px;
        border-left: 3px solid var(--nord15-aurora-purple);
        background-color: var(--blockquote-color);
        font-style: italic;
    }

    footer {
        padding-top: 25px;
        padding-bottom: 25px;
        text-align: left;
        min-height: var(--hfooter);
    }

    footer a {
        margin-right: 10px;
    }

    .title:hover {
        text-decoration: none;
    }

    .title h1 {
        font-size: 1.5em;
    }

    .inline {
        width: auto !important;
    }


    /* blog post list */
    ul.blog-posts {
        list-style-type: none;
        padding: unset;
    }

    ul.blog-posts li {
        display: flex;
    }

    ul.blog-posts li span {
        flex: 0 0 120px;
    }

    ul.blog-posts li a:visited {
        color: var(--visited-color);
    }

    time {
        font-family: inherit;
        font-size: inherit;
        font-variant: small-caps;
    }

    mark {
        background-color: var(--nord13-aurora-yellow);
        padding: 0px 2px;
    }

    kbd {
        --kbd-color-background: var(--code-background-color);
        --kbd-color-text: var(--code-text-color);
        --kbd-color-border: grey;

        background-color: var(--kbd-color-background);
        color: var(--kbd-color-text);
        border-radius: 0.25rem;
        border: 1px solid var(--kbd-color-border);
        box-shadow: 0 2px 0 1px var(--kbd-color-border);
        cursor: default;
        font-family: monospace;
        font-size: 0.8em;
        line-height: 1;
        min-width: 0.75rem;
        display: inline-block;
        text-align: center;
        position: relative;
        padding: 2px;
        top: -1px;

        &:hover {
            box-shadow: 0 1px 0 0.5px var(--kbd-color-border);
            top: 1px;
        }
    }