:root {
                --width: 720px;
                --font-main: monospace;
                --font-secondary: monospace;
                --font-scale: 1em;
                --background-color: #fff;
                --heading-color: #222;
                --text-color: #444;
                --link-color: #3273dc;
                --visited-color: #8b6fcb;
                --blockquote-color: #222
            }

        @media(prefers-color-scheme:dark) {
            :root {
                --background-color: #01242e;
                --heading-color: #eee;
                --text-color: #ddd;
                --link-color: #8cc2dd;
                --visited-color: #8b6fcb;
                --blockquote-color: #ccc
            }
        }

        body {
            font-family: var(--font-secondary);
            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)
        }

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

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

        a:hover {
            text-decoration: underline
        }

        nav a {
            margin-right: 8px
        }

        strong,
        b {
            color: var(--heading-color)
        }

        button {
            margin: 0;
            cursor: pointer
        }

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

        main {
            line-height: 1.6
        }

        table {
            width: 100%
        }

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

        img {
            max-width: 100%
        }

        code {
            font-family: monospace;
            padding: 2px;
            border-radius: 3px
        }

        blockquote {
            border-left: 1px solid #999;
            color: var(--blockquote-color);
            padding-left: 20px;
            font-style: italic
        }

        footer {
            padding: 25px 0;
            text-align: center
        }

        .title:hover {
            text-decoration: none
        }

        .title h1 {
            font-size: 1.5em
        }

        .inline {
            width: auto !important
        }

        .highlight,
        .code {
            border-radius: 3px;
            margin-block-start: 1em;
            margin-block-end: 1em;
            overflow-x: auto
        }

        .highlight pre,
        .code pre {
            min-width: 100%;
            width: max-content
        }

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

        ul.blog-posts li {
            display: flex
        }

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

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