/* styles.css */
body {
    scroll-behavior: smooth;
}

.glitch {
    position: relative;
    color: white;
    text-shadow: 0.05em 0 0 #00fffc, -0.05em -0.025em 0 #fc00ff, 0.025em 0.05em 0 #fffc00;
    animation: glitch-anim 5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% {
        text-shadow: 0.05em 0 0 #00fffc, -0.05em -0.025em 0 #fc00ff, 0.025em 0.05em 0 #fffc00;
    }
    20% {
        text-shadow: 0.05em 0 0 #00fffc, -0.05em -0.025em 0 #fc00ff, 0.025em 0.05em 0 #fffc00;
    }
    25% {
        text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.025em 0 #fc00ff, -0.05em -0.05em 0 #fffc00;
    }
    30% {
        text-shadow: 0.05em 0.05em 0 #00fffc, 0.05em 0 0 #fc00ff, 0 -0.05em 0 #fffc00;
    }
    40% {
        text-shadow: 0.05em 0 0 #00fffc, -0.05em -0.025em 0 #fc00ff, 0.025em 0.05em 0 #fffc00;
    }
    50% {
        text-shadow: -0.025em 0.025em 0 #00fffc, 0.025em 0 0 #fc00ff, 0.025em -0.025em 0 #fffc00;
    }
    60% {
        text-shadow: 0.025em 0 0 #00fffc, -0.025em -0.025em 0 #fc00ff, -0.05em 0 0 #fffc00;
    }
    70% {
        text-shadow: 0.05em 0.05em 0 #00fffc, 0.05em 0 0 #fc00ff, 0 -0.05em 0 #fffc00;
    }
    80% {
        text-shadow: -0.05em 0 0 #00fffc, -0.05em -0.025em 0 #fc00ff, 0.025em 0.05em 0 #fffc00;
    }
    90% {
        text-shadow: 0.025em -0.025em 0 #00fffc, 0.025em 0.025em 0 #fc00ff, 0.05em 0 0 #fffc00;
    }
    100% {
        text-shadow: -0.025em 0 0 #00fffc, -0.025em -0.025em 0 #fc00ff, -0.025em -0.05em 0 #fffc00;
    }
}

#hero-canvas {
    background-color: black;
    z-index: 0;
}