@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: black;
    color: #00ff00;
    font-family: 'Source Code Pro', monospace;
    font-size: 16px;
    text-shadow: 0px 0px 5px #00ff00;
    overflow: hidden;
    padding: 20px;
}

/* Matrix Rain Effect */
canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    opacity: 0.3; /* Slight transparency */
}

.terminal {
    max-width: 800px;
    margin: auto;
    white-space: pre-wrap;
}

h1 {
    text-align: center;
    font-size: 48px;
    animation: flicker 1.5s infinite alternate;
}
h3 {
    text-align: center;
    font-size: 20px;
    animation: flicker 1.5s infinite alternate;
}

/* Typing effect */
#output {
    min-height: 400px;
    padding: 10px;
    border-left: 2px solid #00ff00;
}

/* Blinking cursor */
.cursor {
    display: inline-block;
    background-color: #00ff00;
    width: 10px;
    height: 18px;
    animation: blink 0.8s infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}

/* Flickering text effect */
@keyframes flicker {
    0%   { opacity: 1; }
    50%  { opacity: 0.7; }
    100% { opacity: 1; }
}

/* CRT Scanlines */
.scanlines {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,255,0,0.03) 50%);
    background-size: 100% 3px;
    z-index: 2;
    mix-blend-mode: overlay;
}

/* Glitch Effect */
@keyframes glitch {
    0% { transform: skewX(0deg); }
    20% { transform: skewX(5deg); }
    40% { transform: skewX(-5deg); }
    60% { transform: skewX(3deg); }
    80% { transform: skewX(-3deg); }
    100% { transform: skewX(0deg); }
}

        .matrix-container {
			bottom: 30px;
            position: relative;
            width: 280px;
            height: 80px;
        }

        .matrix-button {
            position: relative;
            width: 100%;
            height: 100%;
            background: transparent;
            border: none;
            cursor: pointer;
            overflow: hidden;
            font-family: 'Courier New', monospace;
        }

        .button-frame {
            position: absolute;
            inset: 0;
            border: 3px solid #0f0;
            clip-path: polygon(
                0 20%, 20% 0,
                80% 0, 100% 20%,
                100% 80%, 80% 100%,
                20% 100%, 0 80%
            );
            animation: frameGlow 2s infinite;
        }

        @keyframes frameGlow {
            0%, 100% { box-shadow: 0 0 20px #0f0; }
            50% { box-shadow: 0 0 40px #0f0; }
        }

        .matrix-rain {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg,
                rgba(0, 255, 0, 0.3),
                rgba(0, 255, 0, 0.1)
            );
            mask: repeating-linear-gradient(
                transparent 0%,
                #000 10%,
                #000 40%,
                transparent 50%
            );
            animation: matrixRain 2s linear infinite;
        }

        @keyframes matrixRain {
            0% { transform: translateY(-100%); }
            100% { transform: translateY(100%); }
        }

        .button-content {
            position: relative;
            z-index: 2;
            font-size: 32px;
			font-weight: bold;
            color: #0f0;
            text-shadow: 0 0 10px #0f0;
            text-transform: uppercase;
            letter-spacing: 4px;
            animation: textGlitch 3s infinite;
        }

        @keyframes textGlitch {
            0%, 100% { transform: translate(0); }
            92% { transform: translate(0); }
            93% { transform: translate(5px, 2px); }
            94% { transform: translate(-3px, -5px); }
            95% { transform: translate(0); }
            96% { transform: translate(4px, 3px); }
            97% { transform: translate(-4px, -2px); }
            98% { transform: translate(0); }
        }

        .energy-pulse {
            position: absolute;
            inset: -50%;
            background: radial-gradient(
                circle at center,
                transparent 30%,
                rgba(0, 255, 0, 0.1) 70%,
                transparent 100%
            );
            animation: pulseRotate 10s linear infinite;
        }

        @keyframes pulseRotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .circuit-lines {
            position: absolute;
            inset: 0;
            background-image: 
                radial-gradient(
                    circle at 50% 50%,
                    rgba(0, 255, 0, 0.2) 2px,
                    transparent 2px
                ),
                linear-gradient(90deg, 
                    transparent 49%,
                    rgba(0, 255, 0, 0.2) 50%,
                    transparent 51%
                ),
                linear-gradient(0deg,
                    transparent 49%,
                    rgba(0, 255, 0, 0.2) 50%,
                    transparent 51%
                );
            background-size: 20px 20px, 20px 20px, 20px 20px;
            animation: circuitPulse 2s infinite;
        }

        @keyframes circuitPulse {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 1; }
        }

        .button-highlight {
            position: absolute;
            inset: 0;
            background: linear-gradient(
                135deg,
                transparent,
                rgba(0, 255, 0, 0.2),
                transparent
            );
            opacity: 0;
            transition: opacity 0.3s;
        }

        .matrix-button:hover .button-highlight {
            opacity: 1;
        }

        .matrix-button:active .button-content {
            transform: scale(0.95);
        }