hr {
        border: none;
        height: 2px;
        width: 95%;
        margin: 30px auto;
        background: linear-gradient(90deg, transparent, #00ffaa, transparent);
        box-shadow: 0 0 10px #00ffaa, 0 0 20px #00ffee;
    }



    body {
        margin: 0;
        background: #0a0a0a;
        color: #00ffcc;
        font-family: 'Share Tech Mono', monospace;
        text-align: center;
        padding: 20px;
        overflow-x: hidden;
        overflow-y: auto;
    }

    /* Matrix-style falling digits */
    canvas {
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        z-index: 0;
        background: #0a0a0a;
    }

    /* Background holographic clock */
    .clock-bg {
        position: fixed;
        top: 50%;
        left: 50%;
        width: 500px;
        height: 500px;
        margin-left: -250px;
        margin-top: -250px;
        border: 3px solid rgba(0, 255, 170, 0.3);
        border-radius: 50%;
        box-shadow: 0 0 60px rgba(0,255,200,0.2);
        animation: rotateClock 40s linear infinite;
        z-index: 1;
        pointer-events: none;
    }
    .clock-bg::before, .clock-bg::after {
        content: "";
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
    }
    .clock-bg::before {
        width: 350px;
        height: 350px;
        border: 2px dashed rgba(0, 255, 170, 0.2);
        animation: rotateClock 25s linear infinite reverse;
    }
    .clock-bg::after {
        width: 200px;
        height: 200px;
        border: 2px dotted rgba(0, 255, 170, 0.15);
        animation: rotateClock 15s linear infinite;
    }
    @keyframes rotateClock {
        from { transform: translate(-50%, -50%) rotate(0deg); }
        to { transform: translate(-50%, -50%) rotate(360deg); }
    }

    .main-text {
        background: rgba(10, 10, 10, 0.85);
        padding: 20px;
        border: 2px solid #00ffaa;
        border-radius: 10px;
        box-shadow: 0 0 15px #00ffaa;
        max-width: 700px;
        margin: auto;
        position: relative;
        z-index: 2;
    }
    h1, h3 {
        color: #00ffaa;
        text-shadow: 0 0 8px #00ffaa, 0 0 16px #008877;
    }
    .image {
        width: 220px;
        border-radius: 50%;
        border: 3px solid #00ffaa;
        box-shadow: 0 0 20px #00ffaa;
    }

    p {
        color: #66ffe0;
        text-shadow: 0 0 6px #00ffaa;
    }
    a {
        margin: 10px;
        color: #00ffaa;
        transition: transform 0.2s, text-shadow 0.2s;
    }
    a:hover {
        transform: scale(1.2);
        text-shadow: 0 0 10px #00ffaa, 0 0 20px #00ffee;
    }
    audio {
        filter: hue-rotate(120deg) drop-shadow(0 0 8px #00ffaa);
    }
    footer {
        margin-top: 40px;
        color: #009977;
        font-size: small;
        text-shadow: 0 0 6px #00ffaa;
    }

    /* glitch text effect */
    .glitch {
        position: relative;
        display: inline-block;
        animation: glitch-skew 1s infinite linear alternate-reverse;
    }
    .glitch::before, .glitch::after {
        content: attr(data-text);
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        overflow: hidden;
        color: #00ffaa;
    }
    .glitch::before {
        left: 2px;
        text-shadow: -2px 0 red;
        animation: glitch-anim 2s infinite linear alternate-reverse;
    }
    .glitch::after {
        left: -2px;
        text-shadow: -2px 0 blue;
        animation: glitch-anim2 3s infinite linear alternate-reverse;
    }
    @keyframes glitch-anim {
        0% { clip: rect(0, 9999px, 0, 0); }
        20% { clip: rect(0, 9999px, 100%, 0); }
        40% { clip: rect(0, 9999px, 0, 0); }
        60% { clip: rect(0, 9999px, 80%, 0); }
        100% { clip: rect(0, 9999px, 0, 0); }
    }
    @keyframes glitch-anim2 {
        0% { clip: rect(0, 9999px, 100%, 0); }
        20% { clip: rect(0, 9999px, 0, 0); }
        40% { clip: rect(0, 9999px, 90%, 0); }
        60% { clip: rect(0, 9999px, 0, 0); }
        100% { clip: rect(0, 9999px, 100%, 0); }
    }
    @keyframes glitch-skew {
        0% { transform: skew(0deg); }
        50% { transform: skew(2deg); }
        100% { transform: skew(-2deg); }
    }
    .audio-container {
        margin: 20px auto;
        max-width: 100%;
    }

    .audio-container audio {
        width: 100%; /* scale to container */
        max-width: 500px; /* optional limit on big screens */
    }


    .glitch-btn {
        background: #0a0a0a;
        border: 2px solid #00ffaa;
        color: #00ffaa;
        padding: 10px 20px;
        margin: 5px;
        font-family: 'Share Tech Mono', monospace;
        cursor: pointer;
        text-transform: uppercase;
        transition: 0.2s;
        border-radius: 5px;
        box-shadow: 0 0 10px #00ffaa;
    }
    .glitch-btn:hover {
        background: #00ffaa;
        color: #0a0a0a;
        box-shadow: 0 0 20px #00ffee;
        transform: scale(1.1);
    }

    .image {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .image:hover {
        transform: scale(1.05);
        box-shadow: 0 0 30px #00ffee;
    }


    .code-block {
        text-align: left;
        display: inline-block;
        background: rgba(0, 20, 20, 0.7);
        padding: 15px 20px;
        border-radius: 8px;
        border: 1px solid #00ffaa;
        box-shadow: 0 0 12px #00ffaa;
        font-family: 'Share Tech Mono', monospace;
        font-size: 0.95rem;
        color: #00ffaa;
        white-space: pre;
    }


    .list-block {
        text-align: left;
        margin: 20px 0;
        padding: 15px 20px;
        background: rgba(0, 20, 20, 0.7);
        border: 1px solid #00ffaa;
        border-radius: 8px;
        box-shadow: 0 0 6px #00ffaa; /* lighter shadow */
    }

    .list-block .list-title {
        color: #00ffaa;
        margin-bottom: 10px;
        font-size: 1.1rem;
        text-shadow: 0 0 2px #00ffaa; /* softer shadow */
    }

    .cyber-list {
        list-style: none;
        padding-left: 0;
        margin: 0;
    }

    .cyber-list li {
        margin: 6px 0;
        padding-left: 18px;
        position: relative;
        color: #66ffe0;
        text-shadow: 0 0 1px #00ffaa; /* very subtle */
        line-height: 1.4em;
    }

    .cyber-list li::before {
        content: ">";
        position: absolute;
        left: 0;
        color: #00ffaa;
        text-shadow: 0 0 2px #00ffee; /* subtle */
    }

    .cyber-list .tag {
        color: #ff66cc;
        font-weight: bold;
        text-shadow: none; /* remove extra glow on tag */
    }