.contenido-404{
    width: 100%;
    height: 100vh;

    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url(/static/img/fondo\ 404.png);
    background-size: cover;
    background-position: center;

    color: white;

    display: flex;
    align-items: center;
    justify-content: center;
}

.elementos-404{
    height: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.elementos-404 h1{
    font-size: 12vh;
    color: var(--color-principal);
}

.elementos-404 p{
    font-size: 2.5vh;
}

.elementos-404 a button{
    cursor: pointer;

    padding: 1.5vh 3vh;
    border-radius: 0.2vh;

    border: 1px solid rgb(197, 197, 197);
    background-color: transparent;

    color: white;

    transition: 0.2s;
}

.elementos-404 a button:hover{
    transition: 0.2s;

    background-color: var(--color-principal);

    border: 1px solid var(--color-principal);
    color: black;
}

.elementos-404 img{
    width: 30vh;
}

/* ============================================= */
/* RESPONSIVE - TABLET Y MÓVIL                    */
/* ============================================= */
 
/* Tablet */
@media (max-width: 1024px){
    .elementos-404 h1{
        font-size: 9vh;
    }
 
    .elementos-404 p{
        font-size: 2.2vh;
        text-align: center;
        max-width: 80%;
    }
}
 
/* Móvil */
@media (max-width: 600px){
    .elementos-404{
        width: 88%;
    }
 
    .elementos-404 h1{
        font-size: 7vh;
    }
 
    .elementos-404 p{
        font-size: 2vh;
        max-width: 100%;
    }
 
    .elementos-404 img{
        width: 20vh;
    }
}