@font-face {
    font-family: regular;
    src: url(../../recursos/fonts/regular.otf);
}

@font-face {
    font-family: negrita;
    src: url(../../recursos/fonts/bold.otf);
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
}

/* MEDIA QUERY 1: min-width: 1367px */
@media (min-width: 1367px) {
    .contenedor_404 {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100vh;
        background: #f2f2f2;
        justify-content: center;
        align-items: center;
        gap: 30px;
    }

    .contenedor_404 h1 {
        font-family: negrita;
        color: #0c388b;
        font-size: 120px;
    }

    .contenedor_404 p {
        font-family: regular;
        color: #0c388b;
        font-size: 30px;
    }

    .contenedor_404 a {
        font-family: negrita;
        color: #fff;
        background: #0c388b;
        font-size: 18px;
        text-decoration: none;
        border-radius: 30px;
        display: flex;
        width: 200px;
        height: 50px;
        justify-content: center;
        align-items: center;
    }

    .contenedor_404 a:hover {
        background: #3434d9;
    }
}

/* MEDIA QUERY 2-6: Mismo diseño responsive */
@media (min-width: 1281px) and (max-width: 1366px),
(min-width: 1025px) and (max-width: 1280px),
(min-width: 768px) and (max-width: 1024px),
(min-width: 481px) and (max-width: 767px),
(min-width: 320px) and (max-width: 480px) {
    .contenedor_404 {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100vh;
        background: #f2f2f2;
        justify-content: center;
        align-items: center;
        gap: 25px;
    }

    .contenedor_404 h1 {
        font-family: negrita;
        color: #0c388b;
        font-size: 80px;
    }

    .contenedor_404 p {
        font-family: regular;
        color: #0c388b;
        font-size: 20px;
        text-align: center;
    }

    .contenedor_404 a {
        font-family: negrita;
        color: #fff;
        background: #0c388b;
        font-size: 14px;
        text-decoration: none;
        border-radius: 30px;
        display: flex;
        width: 180px;
        height: 40px;
        justify-content: center;
        align-items: center;
    }

    .contenedor_404 a:hover {
        background: #3434d9;
    }
}