.word-header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background: rgba(0, 0, 0, 0.75);
            color: #fff1fe;
            font-family: 'Roboto', sans-serif;
            font-size: 0.5rem;
            font-weight: 500;
            text-align: center;
            padding: 1rem 0;
            z-index: 100;
            backdrop-filter: blur(5px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.12);
            letter-spacing: 0.8px;
        }

        .words-container {
            display: flex;
        flex-wrap: nowrap;
        overflow-x: hidden;
        gap: 0.3rem;
            justify-content: space-between;
            align-items: center;
            max-width: 90%;
            margin: 0 auto;
            padding: 0 1rem;
        }

        .word {
            flex: 1;
            text-align: center;
            white-space: nowrap;
            opacity: 0.9;
            transition: opacity 0.3s ease;
        }

        .word:hover {
            opacity: 1;
            text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
        }
        
.word-header a {
    color: inherit !important;
    text-decoration: none !important;
    font-family: inherit !important;
    display: block;
    width: 100%;
}

.word-header a:hover {
    opacity: 1;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.word-header a:visited,
.word-header a:link,
.word-header a:active {
    color: inherit !important;
}

body {
    margin: 0;
    padding: 0;
    padding-top: 70px;
    background: black; /* Black background */
    overflow: hidden;
    font-family: 'Roboto', sans-serif;
}

canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; /* Canvas at lower layer */
}

.container {
    position: relative;
    z-index: 10; /* High z-index for visibility */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 70px);
    text-align: center;
}

.matrix-image {
    max-width: 300px;
    z-index: 11; /* Higher z-index for image visibility */
    animation: glitch 2s linear infinite;
}

.matrix-text {
    color: #ffffff; /* White color */
    font-size: 2.5em;
    text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #cccccc; /* Neon white glow */
    animation: glitch 1s linear infinite;
}

.matrix-subtext {
    color: #ffffff; /* White color */
    font-size: 1.2em;
    text-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff; /* Adjusted neon white glow */
}

@keyframes glitch {
    2%, 64% {
        transform: translate(2px, 0) skew(0deg);
    }
    4%, 60% {
        transform: translate(-2px, 0) skew(0deg);
    }
    62% {
        transform: translate(0, 0) skew(5deg);
    }
}