.site-main {
    min-height: calc(100vh - 80px - 60px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
}

.error-container {
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem;
}


.keyboard-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin: 3rem auto 2rem;
    max-width: 900px;
}
/* 
kbd.key-sub {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    margin: 1rem 0.5rem;
    background: var(--card-bg);
    border: 3px solid var(--border-color);
    border-radius: 6px;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow:
        0 3px 0 var(--border-color),
        0 2px 4px 3px var(--accent-blue),
        0 0 0 transparent;
    text-decoration: none;
    position: relative;
}

a:hover kbd.key-sub {
    color: var(--accent-blue);
    border-color: var(--accent-blue);
    box-shadow:
        0 3px 0 rgba(0, 0, 0, 0.2),
        0 0 20px var(--accent-blue),
        0 0 40px rgba(46, 109, 204, 0.3);
    transform: translateY(1px);
}

a:active kbd.key-sub {
    transform: translateY(2px);
    box-shadow:
        0 1px 0 rgba(0, 0, 0, 0.2),
        0 0 20px var(--accent-blue);
}

kbd.key-active-blue  {
    color: var(--accent-blue);
    border-color: var(--accent-blue);
    box-shadow:
        0 3px 0 rgba(0, 0, 0, 0.2),
        0 0 10px var(--accent-blue),
        0 0 40px rgba(46, 130, 204, 0.3);
}

.key-active-blue:hover kbd {
    box-shadow:
        0 3px 0 rgba(0, 0, 0, 0.2),
        0 0 20px var(--accent-blue),
        0 0 40px rgba(46, 130, 204, 0.3);
}

.keyboard-nav .key-active-blue:active kbd {
    box-shadow:
        0 1px 0 rgba(0, 0, 0, 0.2),
        0 0 20px var(--accent-blue);
}

@media (max-width: 768px) {
    .keyboard-nav {
        gap: 0.75rem;
    }

    .keyboard-nav kbd {
        padding: 0.65rem 1.25rem;
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .keyboard-nav {
        gap: 0.5rem;
    }

    .keyboard-nav kbd {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }
} */





.keyboard-nav kbd {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--card-bg);
    border: 3px solid var(--border-color);
    border-radius: 6px;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow:
        0 3px 0 var(--border-color),
        0 2px 4px 3px var(--accent-blue),
        0 0 0 transparent;
    text-decoration: none;
    position: relative;
}

.keyboard-nav a:hover kbd {
    color: var(--accent-blue);
    border-color: var(--accent-blue);
    box-shadow:
        0 3px 0 rgba(0, 0, 0, 0.2),
        0 0 20px var(--accent-blue),
        0 0 40px rgba(0, 122, 204, 0.3);
    transform: translateY(1px);
}

.keyboard-nav a:active kbd {
    transform: translateY(2px);
    box-shadow:
        0 1px 0 rgba(0, 0, 0, 0.2),
        0 0 20px var(--accent-blue);
}

.keyboard-nav .key-home kbd {
    background: var(--color-success, #2ecc71);
    color: var(--color-text-light);
    border-color: var(--color-success, #2ecc71);
}

.keyboard-nav .key-home:hover kbd {
    box-shadow:
        0 3px 0 rgba(0, 0, 0, 0.2),
        0 0 20px var(--color-success, #2ecc71),
        0 0 40px rgba(46, 204, 113, 0.3);
}

.keyboard-nav .key-home:active kbd {
    box-shadow:
        0 1px 0 rgba(0, 0, 0, 0.2),
        0 0 20px var(--color-success, #2ecc71);
}

@media (max-width: 768px) {
    .keyboard-nav {
        gap: 0.75rem;
    }

    .keyboard-nav kbd {
        padding: 0.65rem 1.25rem;
        font-size: 0.95rem;
    }


}

@media (max-width: 480px) {
    .keyboard-nav {
        gap: 0.5rem;
    }

    .keyboard-nav kbd {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }
} 

.glitch {
    font-size: 12rem;
    font-weight: 900;
    line-height: 1;
    margin: 0;
    color: var(--heading-primary);
    letter-spacing: 1rem;

}

@media (prefers-reduced-motion: no-preference) {
    .glitch {
        animation:
            glitch 6s step-end infinite,
            skew-glitch 7s step-end infinite;
    }
}

@keyframes skew-glitch {
    0% {
        transform: skew(83deg, 2deg) scaleY(.10)
    }

    27% {
        transform: skew(-82deg, 2deg) scaleY(.25)
    }

    64% {
        transform: skew(86deg, -3deg) scaleY(.15)
    }

    93% {
        transform: skew(-92deg, -2deg) scaleY(.25)
    }

    1%,
    29%,
    42%,
    68%,
    93% {
        transform: none
    }
}

@keyframes glitch {
    0% {
        clip-path: polygon(89% 75%, 18% 62%, 7% 71%, 82% 48%, 58% 69%, 77% 22%, 55% 88%, 28% 31%, 31% 19%, 65% 57%, 74% 58%, 56% 9%, 11% 4%, 17% 78%, 8% 26%, 71% 11%, 37% 57%, 73% 74%, 36% 51%, 9% 3%, 91% 92%, 21% 44%, 14% 95%, 27% 71%, 79% 37%, 88% 81%);
    }

    4% {
        clip-path: polygon(31% 82%, 54% 41%, 8% 93%, 29% 18%, 5% 78%, 42% 9%, 81% 49%, 64% 12%, 16% 72%, 74% 89%, 7% 53%, 79% 60%, 2% 91%, 31% 98%, 51% 26%, 49% 20%, 22% 35%, 11% 65%, 19% 92%, 87% 42%, 29% 21%, 3% 32%, 24% 45%, 23% 81%, 5% 73%, 69% 43%);
    }

    27% {
        clip-path: polygon(35% 11%, 77% 85%, 93% 15%, 33% 58%, 15% 62%, 94% 61%, 14% 41%, 56% 78%, 6% 92%, 42% 49%, 66% 72%, 93% 20%, 10% 41%, 77% 25%, 64% 58%, 73% 28%, 86% 48%, 24% 32%, 62% 68%, 8% 94%, 79% 14%, 7% 75%, 67% 74%, 15% 89%, 46% 33%, 32% 40%);
    }

    51% {
        clip-path: polygon(22% 30%, 27% 81%, 69% 53%, 65% 54%, 58% 37%, 30% 14%, 7% 62%, 72% 8%, 40% 93%, 39% 46%, 64% 7%, 68% 21%, 90% 53%, 42% 78%, 65% 13%, 52% 28%, 89% 63%, 6% 80%, 89% 72%, 66% 30%, 89% 6%, 80% 87%, 21% 8%, 45% 97%, 10% 60%, 27% 64%);
    }

    66% {
        clip-path: polygon(87% 6%, 46% 64%, 47% 71%, 7% 31%, 92% 7%, 32% 16%, 18% 45%, 17% 79%, 9% 26%, 25% 37%, 6% 80%, 68% 48%, 36% 60%, 15% 42%, 28% 3%, 26% 30%, 7% 31%, 44% 13%, 5% 29%, 12% 45%, 20% 25%, 43% 38%, 12% 8%, 77% 95%, 41% 79%, 17% 25%);
    }

    89% {
        clip-path: polygon(17% 77%, 9% 9%, 37% 51%, 7% 63%, 95% 90%, 62% 90%, 26% 42%, 65% 96%, 77% 79%, 30% 51%, 32% 12%, 6% 9%, 90% 87%, 86% 75%, 34% 96%, 51% 50%, 63% 64%, 55% 94%, 26% 83%, 18% 49%, 55% 72%, 43% 10%, 75% 7%, 16% 65%, 57% 92%, 42% 22%);
    }

    1%,
    4%,
    28%,
    55%,
    62%,
    84%,
    95% {
        clip-path: none;
    }
}