@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap");

body {
    background-color: black;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    gap: 1rem;
}

@keyframes glitch-heading {
    0%, 70%, 100% {
        transform: translate(0);
        text-shadow: 0 0 0 transparent;
    }
    72% {
        transform: translate(-4px, 1px);
        text-shadow: 2px 0 0 #ff0000, -2px 0 0 #00ff00;
    }
    74% {
        transform: translate(5px, -1px);
        text-shadow: -3px 0 0 #ff0000, 3px 0 0 #00ff00;
    }
    76% {
        transform: translate(-3px, 1px);
        text-shadow: 4px 0 0 #ff0000, -4px 0 0 #00ff00;
    }
    78% {
        transform: translate(6px, -1px);
        text-shadow: -2px 0 0 #ff0000, 2px 0 0 #00ff00;
    }
    80% {
        transform: translate(-5px, 1px);
        text-shadow: 3px 0 0 #ff0000, -3px 0 0 #00ff00;
    }
    82% {
        transform: translate(4px, -1px);
        text-shadow: -4px 0 0 #ff0000, 4px 0 0 #00ff00;
    }
    84%, 86% {
        transform: translate(0);
        text-shadow: 0 0 0 transparent;
    }
    88% {
        transform: translate(-6px, 1px);
        text-shadow: 3px 0 0 #ff0000, -3px 0 0 #00ff00;
    }
    90% {
        transform: translate(7px, -1px);
        text-shadow: -4px 0 0 #ff0000, 4px 0 0 #00ff00;
    }
    92% {
        transform: translate(-4px, 1px);
        text-shadow: 5px 0 0 #ff0000, -5px 0 0 #00ff00;
    }
}

@keyframes glitch-1 {
    0%, 70%, 100% {
        transform: translate(0);
        opacity: 0;
    }
    72% {
        transform: translate(-6px, 1px);
        opacity: 0.9;
    }
    74% {
        transform: translate(7px, -1px);
        opacity: 0.7;
    }
    76% {
        transform: translate(-5px, 2px);
        opacity: 0.8;
    }
    78% {
        transform: translate(8px, -1px);
        opacity: 0.6;
    }
    80% {
        transform: translate(-7px, 1px);
        opacity: 0.9;
    }
    82% {
        transform: translate(6px, -2px);
        opacity: 0.5;
    }
    84%, 86% {
        transform: translate(0);
        opacity: 0;
    }
    88% {
        transform: translate(-8px, 1px);
        opacity: 0.8;
    }
    90% {
        transform: translate(9px, -1px);
        opacity: 0.6;
    }
    92% {
        transform: translate(-6px, 2px);
        opacity: 0.7;
    }
}

@keyframes glitch-2 {
    0%, 70%, 100% {
        transform: translate(0);
        opacity: 0;
    }
    72% {
        transform: translate(5px, -2px);
        opacity: 0.7;
    }
    74% {
        transform: translate(-6px, 1px);
        opacity: 0.5;
    }
    76% {
        transform: translate(7px, -1px);
        opacity: 0.9;
    }
    78% {
        transform: translate(-5px, 2px);
        opacity: 0.4;
    }
    80% {
        transform: translate(8px, -1px);
        opacity: 0.8;
    }
    82% {
        transform: translate(-7px, 1px);
        opacity: 0.6;
    }
    84%, 86% {
        transform: translate(0);
        opacity: 0;
    }
    88% {
        transform: translate(7px, -2px);
        opacity: 0.9;
    }
    90% {
        transform: translate(-8px, 1px);
        opacity: 0.5;
    }
    92% {
        transform: translate(9px, -1px);
        opacity: 0.8;
    }
}

@keyframes glitch-hover {
    0%, 100% {
        transform: translate(0);
        text-shadow: 0 0 0 transparent;
    }
    12% {
        transform: translate(-6px, 1px);
        text-shadow: 3px 0 0 #ff0000, -3px 0 0 #00ff00;
    }
    25% {
        transform: translate(8px, -1px);
        text-shadow: -4px 0 0 #ff0000, 4px 0 0 #00ff00;
    }
    37% {
        transform: translate(-5px, 2px);
        text-shadow: 5px 0 0 #ff0000, -5px 0 0 #00ff00;
    }
    50% {
        transform: translate(7px, -1px);
        text-shadow: -3px 0 0 #ff0000, 3px 0 0 #00ff00;
    }
    62% {
        transform: translate(-8px, 1px);
        text-shadow: 4px 0 0 #ff0000, -4px 0 0 #00ff00;
    }
    75% {
        transform: translate(6px, -2px);
        text-shadow: -5px 0 0 #ff0000, 5px 0 0 #00ff00;
    }
    87% {
        transform: translate(-7px, 1px);
        text-shadow: 3px 0 0 #ff0000, -3px 0 0 #00ff00;
    }
}

@keyframes glitch-hover-1 {
    0%, 100% {
        transform: translate(0);
    }
    12% {
        transform: translate(-8px, 1px);
    }
    25% {
        transform: translate(10px, -1px);
    }
    37% {
        transform: translate(-7px, 2px);
    }
    50% {
        transform: translate(9px, -1px);
    }
    62% {
        transform: translate(-10px, 1px);
    }
    75% {
        transform: translate(8px, -2px);
    }
    87% {
        transform: translate(-9px, 1px);
    }
}

@keyframes glitch-hover-2 {
    0%, 100% {
        transform: translate(0);
    }
    12% {
        transform: translate(7px, -2px);
    }
    25% {
        transform: translate(-9px, 1px);
    }
    37% {
        transform: translate(11px, -1px);
    }
    50% {
        transform: translate(-8px, 2px);
    }
    62% {
        transform: translate(10px, -1px);
    }
    75% {
        transform: translate(-11px, 1px);
    }
    87% {
        transform: translate(9px, -2px);
    }
}

.heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    font-size: 24pt;

    font-family: "Press Start 2P", system-ui;
    font-weight: 400;
    font-style: normal;
    
    animation: glitch-heading 4s infinite;
    position: relative;
}

.heading::before,
.heading::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.heading::before {
    animation: glitch-1 4s infinite;
    color: #ff0000;
    z-index: -1;
    filter: blur(0.5px);
}

.heading::after {
    animation: glitch-2 4s infinite;
    color: #00ff00;
    z-index: -2;
    filter: blur(0.3px);
}
.links {
    display: flex;
    gap: 8rem;
    font-size: 48pt;

    font-family: "VT323", monospace;
    font-weight: 400;
    font-style: normal;
}

.links a {
    color: white;
    text-decoration: none;
    position: relative;
    transition: all 0.1s ease;
}

.links a::before,
.links a::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
}

.links a::before {
    color: #ff0000;
    z-index: -1;
}

.links a::after {
    color: #00ff00;
    z-index: -2;
}

.links a:hover {
    animation: glitch-hover 0.4s infinite;
    filter: contrast(1.2) brightness(1.1);
}

.links a:hover::before {
    animation: glitch-hover-1 0.4s infinite;
    opacity: 1;
    filter: blur(0.8px);
}

.links a:hover::after {
    animation: glitch-hover-2 0.4s infinite;
    opacity: 1;
    filter: blur(0.5px);
}

@media (max-width: 768px) {
    .links {
        flex-direction: column;
        gap: 2rem;
        font-size: 36pt;
    }
}
