/* ============================================================================
   404 ERROR PAGE STYLES
   ============================================================================

   Styles for the 404 error page.
   Features large "404" heading and humorous error message.

   All styles are scoped to 'main' to prevent affecting header/footer.
   ============================================================================ */

/* Center error content */
main {
    padding: 50px;
    text-align: center;
}

/* Very large "404" text for visual impact */
main h1 {
    font-size: 72px;
}

/* Error message text */
main p {
    font-size: var(--font-size-lg);  /* 18px from common.css */
}

/* Style for inline code snippets (error messages) */
main code {
    background-color: #e0e0e0;
    padding: 2px 6px;
    border-radius: var(--radius-sm);  /* 4px from common.css */
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    main {
        padding: 20px;
    }

    main h1 {
        font-size: 48px;
    }
}