:root {
            --bg: #eee9dc;
            --paper: #faf7ef;
            --text: #1c1c1c;
            --muted: #666;
            --border: #b8ad9b;
            --accent: #005f73;
            --terminal: #102027;
            --terminal-text: #9ee493;
            --shadow: rgba(0, 0, 0, .12);
        }

        [data-theme="dark"] {
            --bg: #101418;
            --paper: #161c22;
            --text: #d8dee9;
            --muted: #8b949e;
            --border: #30363d;
            --accent: #7fdbca;
            --terminal: #050708;
            --terminal-text: #9ee493;
            --shadow: rgba(0, 0, 0, .4);
        }

        * {
            box-sizing: border-box;
        }

        html {
            background: var(--bg);
        }

        body {
            margin: 0;
            padding: 2rem 1rem;
            background: var(--bg);
            color: var(--text);
            font-family: "Courier New", Courier, monospace;
            line-height: 1.6;
        }

        main {
            max-width: 850px;
            margin: auto;
            background: var(--paper);
            border: 2px solid var(--border);
            padding: 2rem;
            box-shadow: 6px 6px 0 var(--shadow);
        }

        header {
            border-bottom: 1px dashed var(--border);
            margin-bottom: 2rem;
            padding-bottom: 1rem;
        }

        h1 {
            font-size: 2rem;
            margin: 0;
        }

        h2 {
            color: var(--accent);
            font-size: 1.3rem;
            margin: 0;
        }

        a {
            color: var(--accent);
            text-decoration: none;
            /* color: black; */
        }
        a:hover {
            text-decoration: underline;
        }

        button {
            font-family: inherit;
            background: transparent;
            color: var(--text);
            border: 1px solid var(--border);
            padding: .5rem 1rem;
            cursor: pointer;
            margin-bottom: 1rem;
        }

        button:hover,
        button:focus {
            background: var(--border);
        }

        .terminal {
            background: var(--terminal);
            color: var(--terminal-text);
            padding: 1.25rem;
            border-radius: 4px;
            overflow-x: auto;
            margin: 1.5rem 0 2rem;
        }

        .terminal-prompt {
            color: var(--terminal-text);
        }

        .terminal-output {
            color: #b7c9c4;
        }

        .card {
            border: 1px solid var(--border);
            padding: 1rem;
            margin: 1rem 0;
        }

        .post {
            border: 1px solid var(--border);
            padding: 1.25rem;
            margin: 1rem 0;
            transition: border-color .15s ease;
        }

        .post:hover {
            border-color: var(--accent);
        }

        .post-header {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            gap: 1rem;
            margin-bottom: .5rem;
        }

        .post-title {
            color: var(--accent);
            font-size: 1.1rem;
            margin: 0;
        }

        .post-title a {
            text-decoration: none;
        }

        .post-title a:hover {
            text-decoration: underline;
        }

        .post-date {
            color: var(--muted);
            font-size: .9rem;
            white-space: nowrap;
        }

        .post-description {
            margin: .75rem 0 1rem;
        }

        .tags {
            color: var(--muted);
            font-size: .85rem;
        }

        .tag {
            margin-right: 1rem;
        }

        footer {
            margin-top: 2rem;
            border-top: 1px dashed var(--border);
            padding-top: 1rem;
            color: var(--muted);
            font-size: .9rem;
        }

        .footer-links {
            margin-bottom: .75rem;
        }

        .footer-links a {
            margin-right: 1rem;
        }

        @media (max-width: 600px) {
            body {
                padding: 0rem;
            }

            main {
                padding: 1rem;
            }

            h1 {
                font-size: 1.5rem;
            }

            .post-header {
                display: block;
            }

            .post-date {
                display: block;
                margin-top: .25rem;
            }

            .terminal {
                font-size: .9rem;
            }
        }