/* Vintage Web Theme - 90s/Early 2000s Inspired */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --bg-primary: #F5E6E8;
            --bg-secondary: #E8D5D7;
            --bg-window: #F0F0F0;
            --border-dark: #808080;
            --border-light: #FFFFFF;
            --text-primary: #000000;
            --text-secondary: #333333;
            --text-link: #0000EE;
            --text-visited: #551A8B;
            --accent-teal: #008080;
            --accent-pink: #FFB6C1;
            --button-face: #C0C0C0;
            --highlight: #316AC5;
            --shadow: rgba(0, 0, 0, 0.3);
        }

        @media (prefers-color-scheme: dark) {
            :root {
                --bg-primary: #ffffff;
                --bg-secondary: #d6bad0ff;
                --bg-window: #d6daf0ff;
                --border-dark: #555555;
                --border-light: #777777;
                --text-primary: #666666ff;
                --text-secondary: #af0c0fff;
                --text-link: #33345cff;
                --text-visited: #789922ff;
                --accent-teal: #40E0D0;
                --accent-pink: #FF69B4;
                --button-face: #404040;
                --highlight: #4A90E2;
                --shadow: rgba(0, 0, 0, 0.6);
            }
        }

        @import url('https://fonts.googleapis.com/css2?family=MS+Sans+Serif:wght@400;700&family=Courier+New:wght@400;700&display=swap');

        body {
            font-family: 'MS Sans Serif', 'Tahoma', 'Arial', sans-serif;
            font-size: 12px;
            line-height: 1.4;
            background: var(--bg-primary);
            color: var(--text-primary);
            min-height: 100vh;
            padding-bottom: 24px;
        }

        a {
            color: var(--text-link);
        }

        a:visited {
            color: var(--text-visited);
        }

        .window {
            background: var(--bg-window);
            border-radius: 0;
            box-shadow: 2px 2px 4px var(--shadow);
            margin: 1rem 0;
        }

        .window-header {
            background: linear-gradient(90deg, #316AC5 0%, #4A7BC8 100%);
            color: white;
            padding: 2px 4px;
            font-weight: bold;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid var(--border-dark);
            border-top: 1px solid rgba(255,255,255,0.5);
            border-left: 1px solid rgba(255,255,255,0.3);
            border-right: 1px solid rgba(0,0,0,0.3);
            text-shadow: 1px 1px 0px rgba(0,0,0,0.3);
        }

        .window-title {
            flex: 1;
            padding-left: 4px;
        }

        .window-controls {
            display: flex;
            gap: 2px;
        }

        .window-button {
            width: 16px;
            height: 14px;
            background: var(--button-face);
            border: 1px outset var(--button-face);
            font-size: 11px;
            text-align: center;
            line-height: 12px;
            cursor: pointer;
            font-weight: bold;
        }

        .window-button:active {
            border: 1px inset var(--button-face);
        }

        .window-content {
            padding: 8px;
            background: var(--bg-window);
        }

        .container {
            max-width: 1024px;
            margin: 0 auto;
            padding: 10px;
        }

        .site-nav {
            background: var(--button-face);
            border: 1px outset var(--button-face);
            padding: 4px;
            margin: 8px 0;
        }

        .nav-menu {
            list-style: none;
            display: flex;
            gap: 2px;
            flex-wrap: wrap;
        }

        .nav-item {
            display: inline-block;
        }

        .nav-link {
            display: block;
            padding: 4px 8px;
            background: var(--button-face);
            border: 1px outset var(--button-face);
            color: var(--text-primary);
            text-decoration: none;
            font-size: 12px;
            font-weight: normal;
        }

        .nav-link:hover,
        .nav-link:focus {
            background: var(--highlight);
            color: white;
        }

        .nav-link:active {
            border: 1px inset var(--button-face);
        }

        .main-content {
            margin: 8px 0;
            min-height: 400px;
        }

        .post-list {
            list-style: none;
            margin: 0;
        }

        .post-list-item {
            background: var(--bg-window);
            border: 1px outset var(--border-dark);
            padding: 8px;
            margin-bottom: 4px;
        }

        .post-list-item:hover {
            background: var(--bg-secondary);
        }

        .post-list-title {
            font-weight: bold;
            margin-bottom: 4px;
        }

        .post-list-title a {
            color: var(--text-primary);
            text-decoration: none;
        }

        .post-list-title a:hover {
            color: var(--text-link);
        }

        .post-list-meta {
            font-size: 10px;
            color: var(--text-secondary);
        }

        .post-meta-item {
            margin-right: 12px;
        }

        .post-list-summary {
            margin-top: 4px;
            font-size: 10px;
            line-height: 1.3;
        }

        .status-item {
            padding: 1px 4px;
            border: 1px inset var(--button-face);
            background: var(--bg-window);
            font-size: 10px;
        }

        .blink {
            animation: blink 1s linear infinite;
        }

        @keyframes blink {
            0%, 50% { opacity: 1; }
            51%, 100% { opacity: 0; }
        }

        .marquee {
            background: var(--bg-secondary);
            border: 1px inset var(--border-dark);
            padding: 4px;
            overflow: hidden;
            white-space: nowrap;
        }

        .marquee-content {
            display: inline-block;
        }

        .marquee-text {
            display: inline-block;
            animation: marquee 15s linear infinite;
        }

        @keyframes marquee {
            0% { transform: translateX(100%); }
            100% { transform: translateX(-100%); }
        }

        @keyframes fadeOut {
            from { opacity: 1; transform: scale(1); }
            to { opacity: 0; transform: scale(0.8); }
        }

        @keyframes retroBackground {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .site-footer {
            text-align: center;
            font-size: 10px;
            color: var(--text-secondary);
            margin-top: 16px;
        }

        @media (max-width: 768px) {
            .container {
                padding: 4px;
            }
            
            .nav-menu {
                flex-direction: column;
            }
            
            .nav-item {
                width: 100%;
            }
            
            .nav-link {
                width: 100%;
                box-sizing: border-box;
            }
        }

        @media (max-width: 480px) {
            body {
                font-size: 10px;
            }
        }