/*  ANIMACIONES Y VARS CLAVES */
@property --angle {
    syntax: '<angle>';
    inherits: true;
    initial-value: 0deg;
}
@property --z {
    syntax: '<integer>';
    inherits: true;
    initial-value: 0;
}
:root {
    --fade_time_404: 1s;
    --color_0: rgb(255, 255, 255);
    --color_1: rgb(255, 255, 255);
    --color_2: rgb(251, 255, 0);
    --color_3: rgb(255, 174, 0);
    --color_4: rgb(255, 0, 0);
}


@keyframes revolve_der {
    from {
        --angle: 0deg;
        --z: 0;
    }
    to {
        --angle: 360deg;
        --z: -1;
    }
}
@keyframes revolve_izq {
    from {
        --angle: 0deg;
        --z: 0;
    }
    to {
        --angle: -360deg;
        --z: -1;
    }
}


@keyframes fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}




/*  PROPIEDADES DEL LIENZO Y DE AJUSTE RESPONSIVE */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    height: 100%;        /* Ocupa el 100% del espacio disponible */
    overflow: hidden;
}
body {
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: crosshair;
}

/*  EL 404 GRANDE */
h1 {
    opacity: 0;
    color: var(--color_0);
    font-size: 15vw;
    background-color: transparent;
    text-align: center;
    user-select: none;
    animation: fade var(--fade_time_404) linear;
    animation-fill-mode: forwards;

    

    text-shadow: var(--color_1) 0px 0px 20px, 
                 var(--color_1) 0px 0px 60px,
                 var(--color_2) 0px 0px 100px,
                 var(--color_3) 0px 0px 1000px,
                 var(--color_4) 0px 0px 10000px,
                 var(--color_4) 0px 0px 10000px,
                 var(--color_4) 0px 0px 10000px,
                 var(--color_4) 0px 0px 10000px;
}