/**
 * Estilos para las páginas de error del tipo 40X.
 *
 * @copyright Enfoque Soluciones Informaticas, S.L. (https://www.enfoque-si.com)
 * @author Javier Castro
 * @license https://www.gnu.org/licenses/gpl-3.0.html GPL-3.0
 * @version 1.0.1 (2024-04-23)
 **/

body.error40x {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: radial-gradient(#FFFFFF, #CCCCCC);
}
body.error40x .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 30rem;
        max-width: 90vw;
        gap: 0em;
        text-align: center;
        margin: 2em;
}
body.error40x .logo{
    width: 18em;
    max-width: 80vw;
    padding-left: 0;
}
body.error40x .brand {
    font-size: 3em;
    padding: 0.5em;
    font-weight: 600;
    display: inline-block;
    margin: 0;
    color: var(--brand-first);
    font-family: 'Comfortaa';
}
body.error40x .brand span {
    color: var(--brand-second);
}
body.error40x h1 {
    font-size: 6em;
    font-weight: 600;
    margin: 0;
}
body.error40x .footer {
    font-size: 90%;
    margin-top: 2em;
}
body.error40x .footer p { font-size: 80%; }

/* Responsive - Tablet */
@media (max-width: 1024px) {
    body.error40x .brand {
        font-size: 2.5em;
    }
    body.error40x h1 {
        font-size: 5em;
    }
}

/* Responsive - Mobile */
@media (max-width: 767px) {
    body.error40x .container {
        margin: 1em;
    }
    body.error40x .brand {
        font-size: 2em;
        padding: 0.4em;
    }
    body.error40x h1 {
        font-size: 4em;
    }
    body.error40x .logo {
        width: 12em;
    }
}

/* Responsive - Mobile small */
@media (max-width: 479px) {
    body.error40x .brand {
        font-size: 1.5em;
    }
    body.error40x h1 {
        font-size: 3em;
    }
    body.error40x .logo {
        width: 10em;
    }
    body.error40x .footer {
        font-size: 80%;
        margin-top: 1.5em;
    }
}