@font-face {
            font-family: 'MatrixCode';
            src: url('https://fonts.cdnfonts.com/css/matrix-code-nfi') format('woff2');
        }

        html, body {
            height: 100%;
            margin: 0;
            background-color: #000;
            color: #0f0;
            font-family: 'MatrixCode', 'Courier New', monospace;
            overflow-x: hidden;
        }

        body {
            display: flex;
            flex-direction: column;
            position: relative;
        }

        main {
            flex: 1;
            padding: 3rem 1rem;
            position: relative;
            z-index: 2;
        }

        a {
            color: #0f0;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 0;
            transition: all 0.2s ease-in-out;
            text-shadow: 0 0 5px #0f0;
        }

        a:hover {
            color: #0f0;
            text-shadow: 0 0 10px #0f0;
        }

        .link-title {
            font-weight: bold;
            text-transform: uppercase;
        }

        .link-desc {
            font-style: italic;
            font-size: 0.85rem;
            color: #090;
        }

        .icon {
            width: 1.2rem;
            margin-right: 0.8rem;
            flex-shrink: 0;
            filter: drop-shadow(0 0 2px #0f0);
        }

        .footer {
            font-size: 0.75rem;
            color: #090;
            padding: 3rem 0 2rem;
            width: 100%;
            position: relative;
            z-index: 2;
        }

        .footer-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 720px;
            margin: 0 auto;
            padding: 0 1rem;
        }

        .footer-content a {
            padding: 0;
            display: inline;
        }

        .row-links {
            max-width: 720px;
            margin: auto;
            padding: 1rem;
        }

        .blinker {
            animation: blink 1.2s steps(2, start) infinite;
            color: #090;
        }

        @keyframes blink {
            to {
                visibility: hidden;
            }
        }

        .header-title {
            max-width: 720px;
            margin: 0 auto;
            padding: 0 1rem 2rem;
            color: #0f0;
            text-shadow: 0 0 10px #0f0;
            font-size: 1.5rem;
        }

        .accordion-button {
            padding-left: 0;
            padding-right: 0;
            gap: 0.8rem;
            background-color: rgba(0, 0, 0, 0.7) !important;
            border-bottom: 1px solid #090 !important;
        }

        .accordion-button::after {
            filter: invert(50%) sepia(100%) saturate(10000%) hue-rotate(80deg);
            transition: filter 0.2s ease;
        }

        .accordion-button:hover::after {
            filter: invert(50%) sepia(100%) saturate(10000%) hue-rotate(80deg) brightness(200%);
        }

        .accordion-button:not(.collapsed)::after {
            filter: invert(50%) sepia(100%) saturate(10000%) hue-rotate(80deg) brightness(200%);
        }

        .accordion-button {
            color: #0f0 !important;
            text-shadow: 0 0 5px #0f0;
        }

        .accordion-button:not(.collapsed) {
            color: #0f0 !important;
            background-color: rgba(0, 0, 0, 0.7) !important;
            box-shadow: inset 0 -1px 0 #090;
        }

        .accordion-button:focus {
            box-shadow: none;
        }

        .accordion-body {
            color: #090 !important;
            border-left: 1px solid #090;
            margin-left: 2rem;
            padding-left: 1rem;
            background-color: rgba(0, 20, 0, 0.2);
        }

        /* Matrix rain effect */
        .matrix-rain {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            opacity: 0.3;
        }

        /* Glitch effect on hover */
        .glitch-effect {
            position: relative;
        }

        .glitch-effect:hover::before {
            content: attr(data-text);
            position: absolute;
            left: -2px;
            text-shadow: 2px 0 #f00;
            top: 0;
            color: #0f0;
            background: rgba(0, 0, 0, 0.7);
            overflow: hidden;
            clip: rect(0, 900px, 0, 0);
            animation: noise-anim 2s infinite linear alternate-reverse;
        }

        .glitch-effect:hover::after {
            content: attr(data-text);
            position: absolute;
            left: 2px;
            text-shadow: -2px 0 #00f;
            top: 0;
            color: #0f0;
            background: rgba(0, 0, 0, 0.7);
            overflow: hidden;
            clip: rect(0, 900px, 0, 0);
            animation: noise-anim-2 3s infinite linear alternate-reverse;
        }

        @keyframes noise-anim {
            0% {
                clip: rect(31px, 9999px, 94px, 0);
            }
            10% {
                clip: rect(112px, 9999px, 76px, 0);
            }
            20% {
                clip: rect(85px, 9999px, 77px, 0);
            }
            30% {
                clip: rect(27px, 9999px, 97px, 0);
            }
            40% {
                clip: rect(64px, 9999px, 98px, 0);
            }
            50% {
                clip: rect(61px, 9999px, 85px, 0);
            }
            60% {
                clip: rect(99px, 9999px, 114px, 0);
            }
            70% {
                clip: rect(34px, 9999px, 115px, 0);
            }
            80% {
                clip: rect(98px, 9999px, 129px, 0);
            }
            90% {
                clip: rect(43px, 9999px, 96px, 0);
            }
            100% {
                clip: rect(82px, 9999px, 64px, 0);
            }
        }

        @keyframes noise-anim-2 {
            0% {
                clip: rect(65px, 9999px, 119px, 0);
            }
            10% {
                clip: rect(79px, 9999px, 66px, 0);
            }
            20% {
                clip: rect(24px, 9999px, 15px, 0);
            }
            30% {
                clip: rect(88px, 9999px, 59px, 0);
            }
            40% {
                clip: rect(54px, 9999px, 60px, 0);
            }
            50% {
                clip: rect(39px, 9999px, 36px, 0);
            }
            60% {
                clip: rect(113px, 9999px, 82px, 0);
            }
            70% {
                clip: rect(92px, 9999px, 30px, 0);
            }
            80% {
                clip: rect(5px, 9999px, 5px, 0);
            }
            90% {
                clip: rect(105px, 9999px, 58px, 0);
            }
            100% {
                clip: rect(85px, 9999px, 52px, 0);
            }
        }

        /* Terminal scanline effect */
        body::after {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                rgba(0, 255, 0, 0.1) 0.1em,
                transparent 0.1em
            );
            background-size: 100% 0.2em;
            pointer-events: none;
            z-index: 3;
            animation: scanline 10s linear infinite;
        }

        @keyframes scanline {
            from {
                background-position: 0 0;
            }
            to {
                background-position: 0 100%;
            }
        }

        /* Binary flicker */
        .binary-flicker {
            position: absolute;
            color: #090;
            opacity: 0.3;
            z-index: 1;
            animation: flicker 0.1s infinite alternate;
        }

        @keyframes flicker {
            0% {
                opacity: 0.1;
            }
            10% {
                opacity: 0.2;
            }
            20% {
                opacity: 0.3;
            }
            30% {
                opacity: 0.4;
            }
            40% {
                opacity: 0.5;
            }
            50% {
                opacity: 0.6;
            }
            60% {
                opacity: 0.7;
            }
            70% {
                opacity: 0.8;
            }
            80% {
                opacity: 0.9;
            }
            90% {
                opacity: 1;
            }
            100% {
                opacity: 0.5;
            }
        }