/* --- RESET & NORMALIZATION --- */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            /* Fix for Firefox Android font inflation and other mobile browsers */
            -moz-text-size-adjust: none;
            -webkit-text-size-adjust: none;
            text-size-adjust: none;
        }

        :root {
            --color-bg: #11121f;
            --color-text: #e0e0e0;

            /* ORIGINAL COLORS */
            --cyan: #00f7ff;
            --magenta: #ff00ff;
            --amber: #ffcc00;
            --red: #ff3333;
            --color-white: #ffffff;

            --neon-green: #39ff14;
            --neon-orange: #ff5f1f;
            --neon-blue: #0044ff;
            --neon-silver: #ffffff;
            --neon-triad: #a855f7;

            /* NEW IN-BETWEEN NEON COLORS */
            --neon-rose: #ff0080;
            /* Between Red and Magenta */
            --neon-lime: #ccff00;
            /* Between Green and Amber */
            --neon-aqua: #00ffaa;
            /* Between Green and Cyan */
            --neon-violet: #7f00ff;
            /* Between Blue and Magenta */
            --neon-coral: #ff7f50;
            /* Between Orange and Red */

            /* CARD BACKGROUNDS (Dark versions of accents) */
            --bg-cyan: #0d2b2e;
            --bg-magenta: #2b0d2b;
            --bg-amber: #2b2400;
            --bg-red: #271513;
            --bg-green: #0d2b0d;
            --bg-orange: #2b1405;
            --bg-blue: #14282c;
            --bg-silver: #1f1f1f;
            --bg-triad: #1d0d2b;

            /* NEW CARD BACKGROUNDS */
            --bg-rose: #2b0016;
            --bg-lime: #222b00;
            --bg-aqua: #002b1c;
            --bg-violet: #15002b;
            --bg-coral: #2b150d;
        }

        body {
            background-color: var(--color-bg);
            color: var(--color-text);
            font-family: 'Share Tech Mono', monospace;
            overflow-x: hidden;
            line-height: 1.4;
            min-height: 100vh;
            position: relative;
            -webkit-font-smoothing: antialiased;
            /* Crisper text on Mac/iOS */
            -moz-osx-font-smoothing: grayscale;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        ul {
            list-style: none;
        }

        /* --- FONTS --- */
        .mono-text {
            font-family: 'Share Tech Mono', monospace;
        }

        h1,
        h2 {
            font-family: 'Archivo Black', sans-serif;
            text-transform: uppercase;
        }

        /* --- UTILITIES --- */
        .container {
            width: 80%;
            max-width: 1100px;
            margin: 0 auto;
        }

        /* --- CRT SCREEN OVERLAY --- */
        .screen-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
            background-size: 100% 2px, 3px 100%;
            pointer-events: none;
            z-index: 9999;
            opacity: 0.5;
        }

        /* --- BACKGROUND GRID & GLITCHES --- */
        .bg-line-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
            overflow: hidden;
        }

        .bg-line {
            position: absolute;
            background-color: transparent;
            opacity: 0.3;

        }

        /* Horizontal Lines */
        .bg-line.horz {
            left: 0;
            width: 100%;
            height: 1px;
            background-image: linear-gradient(to right, var(--cyan) 33%, rgba(0, 0, 0, 0) 0%);
            background-size: 8px 1px;
            background-repeat: repeat-x;
        }

        /* Vertical Lines */
        .bg-line.vert {
            top: 0;
            height: 100%;
            width: 1px;
            background-image: linear-gradient(to bottom, var(--cyan) 33%, rgba(0, 0, 0, 0) 0%);
            background-size: 1px 8px;
            background-repeat: repeat-y;
        }

        /* Spark/Glitch Effect on Lines */
        .bg-spark {
            position: absolute;
            background: var(--cyan);
            box-shadow: 0 0 8px var(--cyan), 0 0 3px white;
            border-radius: 1px;
            opacity: 0;
        }

        /* Spark Dimensions & Animations */
        .bg-line.horz .bg-spark {
            top: 0;
            height: 1px;
            width: 40px;
        }

        .bg-line.vert .bg-spark {
            left: 0;
            width: 1px;
            height: 40px;
        }

        /* Animation Keyframes */
        @keyframes bg-scan-x {
            0% {
                left: -10%;
                opacity: 0;
            }

            5% {
                opacity: 1;
            }

            95% {
                opacity: 1;
            }

            100% {
                left: 110%;
                opacity: 0;
            }
        }

        @keyframes bg-scan-y {
            0% {
                top: -10%;
                opacity: 0;
            }

            5% {
                opacity: 1;
            }

            95% {
                opacity: 1;
            }

            100% {
                top: 110%;
                opacity: 0;
            }
        }

        /* --- SPECIFIC GRID LINES --- */
        .bg-line.h1 {
            top: 25%;
        }

        .bg-line.h1 .bg-spark {
            animation: bg-scan-x 5s linear infinite;
        }

        .bg-line.h2 {
            top: 65%;
            opacity: 0.15;
        }

        .bg-line.h2 .bg-spark {
            animation: bg-scan-x 9s linear infinite 2s;
            width: 20px;
        }

        .bg-line.h3 {
            top: 85%;
        }

        .bg-line.h3 .bg-spark {
            animation: bg-scan-x 3s linear infinite 1s;
            background: var(--magenta);
            box-shadow: 0 0 8px var(--magenta);
        }

        .bg-line.v1 {
            left: 8%;
        }

        .bg-line.v1 .bg-spark {
            animation: bg-scan-y 7s linear infinite;
        }

        .bg-line.v2 {
            left: 92%;
            opacity: 0.15;
        }

        .bg-line.v2 .bg-spark {
            animation: bg-scan-y 11s linear infinite 3s;
        }

        .bg-line.v3 {
            left: 50%;
            opacity: 0.1;
        }

        .bg-line.v3 .bg-spark {
            animation: bg-scan-y 4s linear infinite 0.5s;
            background: var(--amber);
        }



        /* --- PROJECT GRID --- */
        main.container {
            padding: 0 2rem 4rem 2rem;
            min-height: 60vh;
        }

        .project-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 1.25rem;
        }

        /* CARD STYLES */
        .project-card {
            background: #111;
            /* Default Fallback */
            border: 1px solid #333;
            /* Default border - colors overriden by themes */
            transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, opacity 0.3s, filter 0.3s;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
        }

        .project-card.hidden {
            display: none;
        }

        .project-card:hover {
            transform: translate(-3px, -3px);
            z-index: 5;
        }

        .card-link-wrapper {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .card-image-container {
            width: 100%;
            aspect-ratio: 16 / 9;
            background: #000;
            overflow: hidden;
            position: relative;
            border-bottom: 3px solid #333;
        }

        .card-image-container img,
        .card-image-container video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }

        .project-card:hover .card-image-container img,
        .project-card:hover .card-image-container video {
            transform: scale(1.1);
        }

        .card-content {
            padding: 1rem;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .card-content h2 {
            font-size: 1rem;
            margin-bottom: 0.4rem;
            color: #fff;
            line-height: 1.1;
            border-bottom: 2px solid #333;
            padding-bottom: 0.3rem;
        }

        .card-content p {
            font-size: 0.75rem;
            color: #ccc;
            margin-bottom: 1rem;
            margin-top: 0.5rem;
        }

        .btn {
            display: inline-block;
            padding: 0.3rem 0.6rem;
            border: 2px solid currentColor;
            font-family: 'Share Tech Mono', monospace;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: auto;
            width: fit-content;

        }

        .mean {
            color: #100000
        }

        .ing {
            color: #A58A20
        }


        /* --- THEMES WITH MATCHING BACKGROUNDS & OUTLINES --- */
        /* Changed border-color to use the neon variable instead of #333 */

        /* CYAN */
        .theme-cyan {
            border-color: var(--cyan);
            background-color: var(--bg-cyan);
        }

        .theme-cyan:hover {
            box-shadow: 5px 5px 0px var(--cyan), 0 0 15px var(--cyan);
        }

        .theme-cyan h2,
        .theme-cyan .btn {
            color: var(--cyan);
        }

        .theme-cyan .btn:hover {
            background: var(--cyan);
            color: #000;
            box-shadow: 0 0 10px var(--cyan);
        }

        .theme-cyan .card-image-container {
            border-bottom-color: var(--cyan);
        }

        /* MAGENTA */
        .theme-magenta {
            border-color: var(--magenta);
            background-color: var(--bg-magenta);
        }

        .theme-magenta:hover {
            box-shadow: 5px 5px 0px var(--magenta), 0 0 15px var(--magenta);
        }

        .theme-magenta h2,
        .theme-magenta .btn {
            color: var(--magenta);
        }

        .theme-magenta .btn:hover {
            background: var(--magenta);
            color: #000;
            box-shadow: 0 0 10px var(--magenta);
        }

        .theme-magenta .card-image-container {
            border-bottom-color: var(--magenta);
        }

        /* RED */
        .theme-red {
            border-color: var(--red);
            background-color: var(--bg-red);
        }

        .theme-red:hover {
            box-shadow: 5px 5px 0px var(--red), 0 0 15px var(--red);
        }

        .theme-red h2,
        .theme-red .btn {
            color: var(--red);
        }

        .theme-red .btn:hover {
            background: var(--red);
            color: #000;
            box-shadow: 0 0 10px var(--red);
        }

        .theme-red .card-image-container {
            border-bottom-color: var(--red);
        }

        /* AMBER */
        .theme-amber {
            border-color: var(--amber);
            background-color: var(--bg-amber);
        }

        .theme-amber:hover {
            box-shadow: 5px 5px 0px var(--amber), 0 0 15px var(--amber);
        }

        .theme-amber h2,
        .theme-amber .btn {
            color: var(--amber);
        }

        .theme-amber .btn:hover {
            background: var(--amber);
            color: #000;
            box-shadow: 0 0 10px var(--amber);
        }

        .theme-amber .card-image-container {
            border-bottom-color: var(--amber);
        }

        /* TRIAD (PURPLE) */
        .theme-triad {
            border-color: var(--neon-triad);
            background-color: var(--bg-triad);
        }

        .theme-triad:hover {
            box-shadow: 5px 5px 0px var(--neon-triad), 0 0 15px var(--neon-triad);
        }

        .theme-triad h2,
        .theme-triad .btn {
            color: var(--neon-triad);
        }

        .theme-triad .btn:hover {
            background: var(--neon-triad);
            color: #fff;
            box-shadow: 0 0 10px var(--neon-triad);
        }

        .theme-triad .card-image-container {
            border-bottom-color: var(--neon-triad);
        }

        /* GREEN */
        .theme-green {
            border-color: var(--neon-green);
            background-color: var(--bg-green);
        }

        .theme-green:hover {
            box-shadow: 5px 5px 0px var(--neon-green), 0 0 15px var(--neon-green);
        }

        .theme-green h2,
        .theme-green .btn {
            color: var(--neon-green);
        }

        .theme-green .btn:hover {
            background: var(--neon-green);
            color: #000;
            box-shadow: 0 0 10px var(--neon-green);
        }

        .theme-green .card-image-container {
            border-bottom-color: var(--neon-green);
        }

        /* ORANGE */
        .theme-orange {
            border-color: var(--neon-orange);
            background-color: var(--bg-orange);
        }

        .theme-orange:hover {
            box-shadow: 5px 5px 0px var(--neon-orange), 0 0 15px var(--neon-orange);
        }

        .theme-orange h2,
        .theme-orange .btn {
            color: var(--neon-orange);
        }

        .theme-orange .btn:hover {
            background: var(--neon-orange);
            color: #000;
            box-shadow: 0 0 10px var(--neon-orange);
        }

        .theme-orange .card-image-container {
            border-bottom-color: var(--neon-orange);
        }

        /* BLUE */
        .theme-blue {
            border-color: var(--neon-blue);
            background-color: var(--bg-blue);
        }

        .theme-blue:hover {
            box-shadow: 5px 5px 0px var(--neon-blue), 0 0 15px var(--neon-blue);
        }

        .theme-blue h2,
        .theme-blue .btn {
            color: var(--neon-blue);
        }

        .theme-blue .btn:hover {
            background: var(--neon-blue);
            color: #fff;
            box-shadow: 0 0 10px var(--neon-blue);
        }

        .theme-blue .card-image-container {
            border-bottom-color: var(--neon-blue);
        }

        /* SILVER */
        .theme-silver {
            border-color: var(--neon-silver);
            background-color: var(--bg-silver);
        }

        .theme-silver:hover {
            box-shadow: 5px 5px 0px var(--neon-silver), 0 0 15px var(--neon-silver);
        }

        .theme-silver h2,
        .theme-silver .btn {
            color: var(--neon-silver);
        }

        .theme-silver .btn:hover {
            background: var(--neon-silver);
            color: #000;
            box-shadow: 0 0 10px var(--neon-silver);
        }

        .theme-silver .card-image-container {
            border-bottom-color: var(--neon-silver);
        }

        /* --- NEW 5 THEMES --- */

        /* ROSE */
        .theme-rose {
            border-color: var(--neon-rose);
            background-color: var(--bg-rose);
        }

        .theme-rose:hover {
            box-shadow: 5px 5px 0px var(--neon-rose), 0 0 15px var(--neon-rose);
        }

        .theme-rose h2,
        .theme-rose .btn {
            color: var(--neon-rose);
        }

        .theme-rose .btn:hover {
            background: var(--neon-rose);
            color: #000;
            box-shadow: 0 0 10px var(--neon-rose);
        }

        .theme-rose .card-image-container {
            border-bottom-color: var(--neon-rose);
        }

        /* LIME */
        .theme-lime {
            border-color: var(--neon-lime);
            background-color: var(--bg-lime);
        }

        .theme-lime:hover {
            box-shadow: 5px 5px 0px var(--neon-lime), 0 0 15px var(--neon-lime);
        }

        .theme-lime h2,
        .theme-lime .btn {
            color: var(--neon-lime);
        }

        .theme-lime .btn:hover {
            background: var(--neon-lime);
            color: #000;
            box-shadow: 0 0 10px var(--neon-lime);
        }

        .theme-lime .card-image-container {
            border-bottom-color: var(--neon-lime);
        }

        /* AQUA */
        .theme-aqua {
            border-color: var(--neon-aqua);
            background-color: var(--bg-aqua);
        }

        .theme-aqua:hover {
            box-shadow: 5px 5px 0px var(--neon-aqua), 0 0 15px var(--neon-aqua);
        }

        .theme-aqua h2,
        .theme-aqua .btn {
            color: var(--neon-aqua);
        }

        .theme-aqua .btn:hover {
            background: var(--neon-aqua);
            color: #000;
            box-shadow: 0 0 10px var(--neon-aqua);
        }

        .theme-aqua .card-image-container {
            border-bottom-color: var(--neon-aqua);
        }

        /* VIOLET */
        .theme-violet {
            border-color: var(--neon-violet);
            background-color: var(--bg-violet);
        }

        .theme-violet:hover {
            box-shadow: 5px 5px 0px var(--neon-violet), 0 0 15px var(--neon-violet);
        }

        .theme-violet h2,
        .theme-violet .btn {
            color: var(--neon-violet);
        }

        .theme-violet .btn:hover {
            background: var(--neon-violet);
            color: #fff;
            box-shadow: 0 0 10px var(--neon-violet);
        }

        .theme-violet .card-image-container {
            border-bottom-color: var(--neon-violet);
        }

        /* CORAL */
        .theme-coral {
            border-color: var(--neon-coral);
            background-color: var(--bg-coral);
        }

        .theme-coral:hover {
            box-shadow: 5px 5px 0px var(--neon-coral), 0 0 15px var(--neon-coral);
        }

        .theme-coral h2,
        .theme-coral .btn {
            color: var(--neon-coral);
        }

        .theme-coral .btn:hover {
            background: var(--neon-coral);
            color: #000;
            box-shadow: 0 0 10px var(--neon-coral);
        }

        .theme-coral .card-image-container {
            border-bottom-color: var(--neon-coral);
        }


        footer {
            text-align: center;
            padding: 2rem 2rem 6rem 2rem;
            color: #139A5C;
            border-top: 1px solid #222;
            margin-top: 2rem;
            font-size: 0.8rem;
        }

        .footer-link {
            color: cyan;
            transition: color 0.3s;
        }

        .footer-link:hover {
            color: var(--red);
        }

        img[src=""] {
            display: none;
        }

        .img-fallback {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #1a1a1a;
            color: #333;
            font-size: 3rem;
        }

        /* --- NEW FILTER BAR --- */
        .filter-bar {
            display: flex;
            justify-content: center;
            gap: 1rem;
            padding: 1rem 0 2rem 0;
            flex-wrap: wrap;
        }

        .filter-btn {
            font-family: 'Share Tech Mono', monospace;
            font-size: 0.9rem;
            text-transform: uppercase;
            background: transparent;
            border: 1px solid #333;
            color: #666;
            padding: 0.4rem 0.8rem;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
        }

        .filter-btn:hover,
        .filter-btn.active {
            border-color: currentColor;
            text-shadow: 0 0 10px currentColor;
            box-shadow: 0 0 10px currentColor;
            /* Glow effect */
        }

        /* COLOR CODING */
        .filter-btn[data-filter="science"] {
            color: #888;
        }

        .filter-btn[data-filter="science"]:hover,
        .filter-btn[data-filter="science"].active {
            color: var(--amber);
        }

        .filter-btn[data-filter="music"] {
            color: #888;
        }

        .filter-btn[data-filter="music"]:hover,
        .filter-btn[data-filter="music"].active {
            color: var(--neon-blue);
        }

        .filter-btn[data-filter="art"] {
            color: #888;
        }

        .filter-btn[data-filter="art"]:hover,
        .filter-btn[data-filter="art"].active {
            color: var(--red);
        }

        .filter-btn[data-filter="prose"] {
            color: #888;
        }

        .filter-btn[data-filter="prose"]:hover,
        .filter-btn[data-filter="prose"].active {
            color: var(--neon-violet);
        }

        .filter-btn[data-filter="games"] {
            color: #888;
        }

        .filter-btn[data-filter="games"]:hover,
        .filter-btn[data-filter="games"].active {
            color: var(--neon-green);
        }

        .filter-btn[data-filter="info"] {
            color: #888;
        }

        .filter-btn[data-filter="info"]:hover,
        .filter-btn[data-filter="info"].active {
            color: var(--cyan);
        }