body {
    background: linear-gradient(180deg, #000000, #111122);
    font-family: "Courier New", monospace;
    color: #00ff99;
    margin: 0;
    padding: 0;
    text-align: center;
}
header {
    padding: 1em;
    border-bottom: 4px double #00ff99;
    text-shadow: 2px 2px #000;
    position: relative;
    overflow: hidden;
    background: linear-gradient(45deg, #003366, #660066, #003366, #330066, #006633);
    background-size: 300% 300%;
    animation: gradientRotate 4s ease infinite;
}

@keyframes gradientRotate {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Animated pulsating border effect */
header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        #00ff99 20%, 
        #00ffff 50%, 
        #00ff99 80%, 
        transparent 100%
    );
    animation: pulsate 2s ease-in-out infinite;
    box-shadow: 0 0 10px #00ff99;
}

@keyframes pulsate {
    0% {
        opacity: 0.4;
        transform: scaleX(0.8);
        box-shadow: 0 0 5px #00ff99;
    }
    50% {
        opacity: 1;
        transform: scaleX(1.1);
        box-shadow: 0 0 20px #00ff99, 0 0 30px #00ffff;
    }
    100% {
        opacity: 0.4;
        transform: scaleX(0.8);
        box-shadow: 0 0 5px #00ff99;
    }
}

header h1 {
    margin: 0;
    font-size: 2.5em;
    color: #ffcc00;
    letter-spacing: 2px;
}
main {
    max-width: 800px;
    margin: auto;
    padding: 2em;
    background-color: rgba(0, 0, 0, 0.8);
    border: 2px solid #00ff99;
    box-shadow: 0 0 15px #00ff99;
}
.avatar {
    position: relative;
    display: inline-block;
    margin: 1em 0;
    overflow: hidden;
}

.avatar img {
    border: 4px ridge #01536d;
    background-color: black;
    position: relative;
    z-index: 1;
    display: block;
    animation: signalGlitch 4s infinite;
}

/* Signal loss glitch overlay with heavy static */
.avatar .glitch-overlay {
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            rgba(255, 255, 255, 0.15) 1px,
            rgba(255, 255, 255, 0.15) 2px,
            transparent 2px,
            rgba(0, 255, 0, 0.12) 3px,
            rgba(0, 255, 0, 0.12) 4px,
            transparent 4px,
            rgba(255, 255, 255, 0.08) 5px,
            rgba(255, 255, 255, 0.08) 6px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            rgba(255, 255, 255, 0.1) 1px,
            rgba(255, 255, 255, 0.1) 2px,
            transparent 2px,
            rgba(0, 255, 255, 0.08) 3px,
            rgba(0, 255, 255, 0.08) 4px
        );
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    animation: staticNoise 4s infinite;
}

/* Additional heavy static overlay */
.avatar .glitch-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 15% 25%, rgba(255, 255, 255, 0.2) 1px, transparent 1px),
        radial-gradient(circle at 85% 75%, rgba(0, 255, 0, 0.15) 1px, transparent 1px),
        radial-gradient(circle at 35% 85%, rgba(255, 255, 255, 0.12) 1px, transparent 1px),
        radial-gradient(circle at 75% 15%, rgba(0, 255, 255, 0.1) 1px, transparent 1px),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        radial-gradient(circle at 25% 60%, rgba(0, 255, 0, 0.1) 1px, transparent 1px);
    background-size: 6px 6px, 8px 8px, 4px 4px, 7px 7px, 5px 5px, 9px 9px;
    animation: staticMovement 0.05s infinite;
    opacity: 0;
}

.avatar .glitch-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.06) 0%,
            transparent 10%,
            rgba(0, 255, 0, 0.08) 25%,
            transparent 35%,
            rgba(255, 255, 255, 0.04) 50%,
            transparent 60%,
            rgba(0, 255, 255, 0.06) 75%,
            transparent 85%,
            rgba(255, 255, 255, 0.05) 100%
        );
    animation: tvRoll 0.15s infinite;
    opacity: 0;
}

/* Data scan lines effect - downward */
.avatar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 4px;
    right: 4px;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 255, 153, 0.8) 50%,
        transparent 100%
    );
    box-shadow: 
        0 0 10px rgba(0, 255, 153, 0.6),
        0 1px 0 rgba(0, 255, 153, 0.3),
        0 -1px 0 rgba(0, 255, 153, 0.3);
    animation: scanDown 2.5s linear infinite;
    z-index: 2;
    pointer-events: none;
    border-radius: 1px;
}

/* Data scan lines effect - upward */
.avatar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 4px;
    right: 4px;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 255, 255, 0.6) 50%,
        transparent 100%
    );
    box-shadow: 
        0 0 8px rgba(0, 255, 255, 0.5),
        0 1px 0 rgba(0, 255, 255, 0.2);
    animation: scanUp 3.2s linear infinite;
    z-index: 2;
    pointer-events: none;
    border-radius: 1px;
}

@keyframes scanDown {
    0% {
        top: 4px;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        top: calc(100% - 7px);
        opacity: 0;
    }
}

@keyframes scanUp {
    0% {
        top: calc(100% - 6px);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        top: 4px;
        opacity: 0;
    }
}

@keyframes scanDown {
    0% {
        top: 4px;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        top: calc(100% - 7px);
        opacity: 0;
    }
}

@keyframes scanUp {
    0% {
        top: calc(100% - 5px);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        top: 4px;
        opacity: 0;
    }
}

@keyframes signalGlitch {
    0%, 12% {
        filter: none;
        transform: none;
    }
    13% {
        filter: contrast(1.4) brightness(0.7);
        transform: translateX(2px);
    }
    14% {
        filter: contrast(0.6) brightness(1.3) hue-rotate(120deg);
        transform: translateX(-3px) scaleY(1.03);
    }
    15%, 28% {
        filter: none;
        transform: none;
    }
    29% {
        filter: contrast(1.2) brightness(0.8) saturate(1.4);
        transform: translateX(1px) skewX(0.5deg);
    }
    30%, 41% {
        filter: none;
        transform: none;
    }
    42% {
        filter: contrast(0.8) brightness(1.1) hue-rotate(270deg);
        transform: translateX(-2px);
    }
    43% {
        filter: contrast(1.5) brightness(0.6);
        transform: translateX(3px) scaleX(1.02);
    }
    44% {
        filter: contrast(0.7) brightness(1.2);
        transform: translateX(-1px);
    }
    45%, 61% {
        filter: none;
        transform: none;
    }
    62% {
        filter: contrast(1.1) brightness(0.9) hue-rotate(45deg);
        transform: translateX(1px);
    }
    63%, 73% {
        filter: none;
        transform: none;
    }
    74% {
        filter: contrast(1.3) brightness(0.8);
        transform: translateX(-2px) scaleY(0.99);
    }
    75% {
        filter: contrast(0.9) brightness(1.1) hue-rotate(180deg);
        transform: translateX(2px);
    }
    76%, 87% {
        filter: none;
        transform: none;
    }
    88% {
        filter: contrast(1.2) brightness(0.7) saturate(1.3);
        transform: translateX(-1px) skewX(-0.3deg);
    }
    89%, 100% {
        filter: none;
        transform: none;
    }
}

@keyframes staticNoise {
    0%, 12% {
        opacity: 0;
    }
    13% {
        opacity: 0.9;
        background-position: 1px 2px, -2px 1px;
    }
    13.3% {
        opacity: 0.7;
        background-position: -1px 0px, 3px -1px;
    }
    13.6% {
        opacity: 1.0;
        background-position: 2px -2px, 0px 2px;
    }
    14% {
        opacity: 0.5;
        background-position: -3px 1px, 1px 0px;
    }
    14.3% {
        opacity: 0.8;
        background-position: 0px 3px, -1px -2px;
    }
    15%, 28% {
        opacity: 0;
    }
    29% {
        opacity: 0.6;
        background-position: 2px 0px, 1px 1px;
    }
    29.5% {
        opacity: 0.8;
        background-position: -1px 2px, -2px 0px;
    }
    30%, 41% {
        opacity: 0;
    }
    42% {
        opacity: 0.7;
        background-position: 1px -1px, 2px 3px;
    }
    42.2% {
        opacity: 0.9;
        background-position: -2px 2px, 0px -1px;
    }
    42.4% {
        opacity: 0.5;
        background-position: 3px 1px, -1px 2px;
    }
    42.6% {
        opacity: 0.8;
        background-position: 0px 0px, 2px -2px;
    }
    42.8% {
        opacity: 0.6;
        background-position: -1px 3px, 1px 1px;
    }
    43% {
        opacity: 1.0;
        background-position: 2px 1px, -3px 0px;
    }
    43.2% {
        opacity: 0.4;
        background-position: 1px -3px, 0px 2px;
    }
    43.4% {
        opacity: 0.9;
        background-position: -2px 0px, 3px 1px;
    }
    43.6% {
        opacity: 0.7;
        background-position: 0px 2px, -1px -1px;
    }
    43.8% {
        opacity: 0.5;
        background-position: 2px 0px, 1px 3px;
    }
    44% {
        opacity: 0.8;
        background-position: -1px 1px, -2px -1px;
    }
    44.2% {
        opacity: 0.6;
        background-position: 3px -1px, 0px 1px;
    }
    45%, 61% {
        opacity: 0;
    }
    62% {
        opacity: 0.5;
        background-position: 1px 0px, -1px 1px;
    }
    62.3% {
        opacity: 0.7;
        background-position: -2px 2px, 2px 0px;
    }
    63%, 73% {
        opacity: 0;
    }
    74% {
        opacity: 0.8;
        background-position: 0px 1px, 1px -1px;
    }
    74.4% {
        opacity: 0.6;
        background-position: 2px 2px, -1px 0px;
    }
    74.8% {
        opacity: 0.9;
        background-position: -1px -1px, 3px 1px;
    }
    75% {
        opacity: 0.4;
        background-position: 1px 3px, 0px -2px;
    }
    75.3% {
        opacity: 0.7;
        background-position: -2px 1px, 2px 2px;
    }
    76%, 87% {
        opacity: 0;
    }
    88% {
        opacity: 0.6;
        background-position: 1px 1px, -1px 0px;
    }
    88.4% {
        opacity: 0.8;
        background-position: 0px -1px, 2px 1px;
    }
    89%, 100% {
        opacity: 0;
    }
}

@keyframes staticMovement {
    0% {
        opacity: 0.8;
        transform: translate(0px, 0px);
    }
    10% {
        opacity: 1.0;
        transform: translate(2px, -1px);
    }
    20% {
        opacity: 0.6;
        transform: translate(-1px, 2px);
    }
    30% {
        opacity: 0.9;
        transform: translate(1px, 1px);
    }
    40% {
        opacity: 0.7;
        transform: translate(-2px, -1px);
    }
    50% {
        opacity: 1.0;
        transform: translate(1px, -2px);
    }
    60% {
        opacity: 0.5;
        transform: translate(-1px, 0px);
    }
    70% {
        opacity: 0.8;
        transform: translate(2px, 1px);
    }
    80% {
        opacity: 0.9;
        transform: translate(0px, -1px);
    }
    90% {
        opacity: 0.6;
        transform: translate(-1px, 2px);
    }
    100% {
        opacity: 0.7;
        transform: translate(1px, -1px);
    }
}

@keyframes tvRoll {
    0% {
        transform: translateY(0px);
        opacity: 0.5;
    }
    20% {
        transform: translateY(-1px);
        opacity: 0.8;
    }
    40% {
        transform: translateY(-2px);
        opacity: 0.6;
    }
    60% {
        transform: translateY(-3px);
        opacity: 0.9;
    }
    80% {
        transform: translateY(-4px);
        opacity: 0.4;
    }
    100% {
        transform: translateY(-5px);
        opacity: 0.7;
    }
}
.summary, .about-me {
    text-align: left;
    margin-bottom: 2em;
    color: #e0ffe0;
}
.link-list {
    list-style: none;
    padding: 0;
    text-align: left;
    margin: auto;
    display: inline-block;
}
.link-list li {
    margin: 0.7em 0;
}
.link-list a {
    color: #00ffff;
    text-decoration: none;
    border-bottom: 1px dashed #00ffff;
    transition: all 0.2s ease-in-out;
}
.link-list a:hover {
    color: #ff66ff;
    border-bottom: 1px solid #ff66ff;
    text-shadow: 0 0 5px #ff66ff;
}
footer {
    margin-top: 2em;
    font-size: 0.8em;
    color: #888;
}