/* * Main styling for the retro theme.
         * We use CSS variables to define the color palette for easy changes.
         * The primary font is 'Press Start 2P' to get that classic video game feel.
        */
        :root {
            --background-color: #0d1117; /* A dark, space-like blue */
            --primary-text: #e6edf3; /* Off-white for readability */
            --border-color: #30363d;
            --highlight-color: #2f81f7; /* A bright blue for highlights */
            --menu-highlight: #1f6feb;
            --window-bg: #161b22;
            --success-color: #3fb950;
            --warning-color: #d29922;
        }

        body {
            font-family: 'Press Start 2P', cursive;
            background-color: var(--background-color);
            color: var(--primary-text);
            background-image:
                radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.1) 1px, transparent 0),
                radial-gradient(circle at 10px 10px, rgba(255, 255, 255, 0.05) 1px, transparent 0);
            background-size: 20px 20px;
            animation: stars 60s linear infinite;
            image-rendering: pixelated; /* Ensures images have a sharp, pixelated look */
        }

        @keyframes stars {
            from { background-position: 0 0; }
            to { background-position: 0 1000px; }
        }

        /* * Custom class for creating the classic 9-slice border effect
         * common in old-school RPG UI windows.
        */
        .pixel-box {
            background-color: var(--window-bg);
            border: 4px solid var(--border-color);
            box-shadow: 
                inset 0 0 0 4px var(--background-color),
                0 0 0 4px var(--border-color);
            padding: 2rem;
            position: relative;
        }

        /* General styling for section titles to look like window headers */
        .section-title {
            display: inline-block;
            background-color: var(--border-color);
            padding: 0.5rem 1.5rem;
            font-size: 1.25rem;
            color: var(--primary-text);
            position: absolute;
            top: -24px; /* Position it to overlap the top border */
            left: 50%;
            transform: translateX(-50%);
            white-space: nowrap;
        }

        /* Styling for buttons to look like classic game menu options */
        .pixel-btn {
            background-color: var(--border-color);
            color: var(--primary-text);
            padding: 1rem 1.5rem;
            text-decoration: none;
            display: inline-block;
            transition: all 0.2s ease-in-out;
            position: relative;
            text-align: center;
            border: 4px solid var(--border-color);
        }

        .pixel-btn:hover {
            background-color: var(--menu-highlight);
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 4px 0 var(--highlight-color);
        }

        .pixel-btn::before {
            content: '▶';
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            opacity: 0;
            transition: opacity 0.2s ease-in-out;
            color: var(--highlight-color);
        }

        .pixel-btn:hover::before {
            opacity: 1;
        }

        /* Typewriter effect for text animation */
        .typewriter {
            overflow: hidden;
            border-right: .15em solid var(--highlight-color);
            white-space: nowrap;
            margin: 0 auto;
            letter-spacing: .15em;
            animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
        }

        @keyframes typing {
            from { width: 0 }
            to { width: 100% }
        }

        @keyframes blink-caret {
            from, to { border-color: transparent }
            50% { border-color: var(--highlight-color); }
        }
        
        /* Custom scrollbar for a more thematic feel */
        ::-webkit-scrollbar {
            width: 12px;
            background-color: var(--background-color);
        }
        ::-webkit-scrollbar-thumb {
            background-color: var(--border-color);
            border: 2px solid var(--background-color);
        }
        ::-webkit-scrollbar-thumb:hover {
            background-color: var(--highlight-color);
        }

        /* Animation for elements appearing on scroll */
        .fade-in-section {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }

        .fade-in-section.is-visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* Ensure images don't look blurry when scaled */
        img {
            image-rendering: -moz-crisp-edges; /* Firefox */
            image-rendering: -webkit-crisp-edges; /* Webkit */
            image-rendering: pixelated; /* General */
            image-rendering: crisp-edges;
        }