/*
 * Page-Specific Styles for the 404 Error Page (404.html)
 */

/* ------------------- */
/* 404 Container       */
/* ------------------- */
/*
 * Styles the main container for the 404 page content.
 * It's designed to center the content vertically and horizontally.
 */
.container-404 {
    /* Uses flexbox to center the content. */
    display: flex;
    /* Arranges content in a column. */
    flex-direction: column;
    /* Centers content vertically. */
    justify-content: center;
/*
    align-items: center;
    /* Ensures the container takes up at least the full height of the viewport minus header/footer. */
    min-height: calc(100vh - var(--nav-height) - var(--footer-height));
    /* Centers all text within the container. */
    text-align: center;
    /* Adds padding for spacing on smaller screens. */
    padding: 2rem;
}

/* ------------------- */
/* 404 Content         */
/* ------------------- */
/*
 * Styles for the main text content of the 404 page.
 */
.content-404 {
    /* Sets a maximum width for readability. */
    max-width: 600px;
}

/*
 * Styles for the giant "404" number.
 */
.content-404 h1 {
    /* A very large font size to be dramatic. */
    font-size: 10rem;
    /* Uses a prominent accent color. */
    color: var(--color-secondary-accent);
    /* Removes the default bottom margin to keep it tight with the h2. */
    margin-bottom: 0;
    /* Tighter line height for large text. */
    line-height: 1;
    /* A subtle text shadow for depth. */
    text-shadow: 4px 4px 0px var(--color-text);
}

/*
 * Styles for the "Page Not Found" subheading.
 */
.content-404 h2 {
    /* A large font size, but smaller than the h1. */
    font-size: 2.5rem;
    /* Adds space below the subheading. */
    margin-bottom: 1.5rem;
}

/*
 * Styles for the descriptive paragraphs.
 */
.content-404 p {
    /* A slightly larger font size for readability. */
    font-size: 1.1rem;
    /* Adds space below the paragraphs. */
    margin-bottom: 1rem;
}

/*
 * Styles for the return button, adding extra margin on top.
 */
.content-404 .btn {
    margin-top: 2rem;
}

/* ------------------- */
/* Interactive Element */
/* ------------------- */
/*
 * Styles for the container of the fun, interactive element.
 */
.interactive-element {
    /* Adds space above the interactive element. */
    margin-top: 3rem;
    /* Sets padding for the element's container. */
    padding: 2rem;
    /* A border to frame the element. */
    border: 2px dashed var(--color-primary-accent);
    /* A minimum height for the container. */
    min-height: 150px;
}