/* Background gradient to mimic the Matrix glow */
body {
    background: black;
        color: #0f0;
            font-family: 'Courier New', Courier, monospace;
                overflow-x: hidden;
                }

                /* Glitchy text effect for headers */
                .glitch {
                    position: relative;
                        color: #0f0;
                            font-size: 2em;
                                letter-spacing: 2px;
                                    animation: flicker 1.5s infinite;
                                    }

                                    .glitch::before,
                                    .glitch::after {
                                        content: attr(data-text);
                                            position: absolute;
                                                left: 0;
                                                    top: 0;
                                                        width: 100%;
                                                            overflow: hidden;
                                                                color: #0f0;
                                                                    clip: rect(0, 900px, 0, 0);
                                                                    }

                                                                    .glitch::before {
                                                                        left: 2px;
                                                                            text-shadow: -2px 0 red;
                                                                                animation: glitchTop 2s infinite linear alternate-reverse;
                                                                                }

                                                                                .glitch::after {
                                                                                    left: -2px;
                                                                                        text-shadow: -2px 0 blue;
                                                                                            animation: glitchBottom 3s infinite linear alternate-reverse;
                                                                                            }

                                                                                            /* Animations */
                                                                                            @keyframes flicker {
                                                                                                0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
                                                                                                    20%, 22%, 24%, 55% { opacity: 0; }
                                                                                                    }

                                                                                                    @keyframes glitchTop {
                                                                                                        0% { clip: rect(0, 900px, 0, 0); }
                                                                                                            10% { clip: rect(10px, 900px, 40px, 0); transform: translate(-3px, -3px); }
                                                                                                                20% { clip: rect(20px, 900px, 60px, 0); transform: translate(3px, 3px); }
                                                                                                                    30% { clip: rect(0px, 900px, 80px, 0); transform: translate(-2px, 2px); }
                                                                                                                        40% { clip: rect(15px, 900px, 50px, 0); transform: translate(2px, -2px); }
                                                                                                                            50% { clip: rect(0, 900px, 90px, 0); transform: translate(0, 0); }
                                                                                                                                100% { clip: rect(0, 900px, 0, 0); }
                                                                                                                                }

                                                                                                                                @keyframes glitchBottom {
                                                                                                                                    0% { clip: rect(0, 900px, 0, 0); }
                                                                                                                                        10% { clip: rect(5px, 900px, 50px, 0); transform: translate(3px, 2px); }
                                                                                                                                            20% { clip: rect(25px, 900px, 70px, 0); transform: translate(-3px, -3px); }
                                                                                                                                                30% { clip: rect(10px, 900px, 60px, 0); transform: translate(2px, -2px); }
                                                                                                                                                    40% { clip: rect(0, 900px, 80px, 0); transform: translate(-2px, 2px); }
                                                                                                                                                        50% { clip: rect(5px, 900px, 90px, 0); transform: translate(0, 0); }
                                                                                                                                                            100% { clip: rect(0, 900px, 0, 0); }
                                                                                                                                                            }

                                                                                                                                                            /* Matrix falling text effect */
                                                                                                                                                            .matrix {
                                                                                                                                                                position: fixed;
                                                                                                                                                                    top: 0;
                                                                                                                                                                        left: 0;
                                                                                                                                                                            width: 100%;
                                                                                                                                                                                height: 100%;
                                                                                                                                                                                    z-index: -1;
                                                                                                                                                                                        overflow: hidden;
                                                                                                                                                                                            pointer-events: none;
                                                                                                                                                                                            }

                                                                                                                                                                                            .matrix span {
                                                                                                                                                                                                position: absolute;
                                                                                                                                                                                                    color: #0f0;
                                                                                                                                                                                                        font-family: 'Courier New', Courier, monospace;
                                                                                                                                                                                                            font-size: 16px;
                                                                                                                                                                                                                animation: fall linear infinite;
                                                                                                                                                                                                                }

                                                                                                                                                                                                                @keyframes fall {
                                                                                                                                                                                                                    0% { top: -100px; }
                                                                                                                                                                                                                        100% { top: 100%; }
                                                                                                                                                                                                                        }