:root {
    --blanco: #FFFFFF;
    --negro: #000000;
    --p-claro: #8EC9E6;
    --p-med: #2187BA;
    --p-oscuro: #023047;
    --s-claro: #E6CD8E;
    --s-med: #BA8F22;
    --s-oscuro: #473402;

    --bien: #8EE68E;
    --mal: #E68E8E;

    font-family: "League Spartan", sans-serif;
}

body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin: 0;
}

a {
    color: var(--negro);
    text-decoration: none;
}

nav {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

nav a {
    color: var(--blanco);
}

.indice {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: 30%;
}

.oculto {
    display: none !important;
}

.contenedor {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    text-align: center;
}

.fondo-0 {
    background-color: var(--s-claro);
    color: var(--negro);
}

.fondo-1 {
    background-color: var(--p-med);
    color: var(--blanco);
}

.footer-info {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
}

.footer-info div {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 25%;
}

.footer-info a {
    color: var(--blanco);
    margin: .5rem;
}



/* Mobile (hasta 767px de ancho) */
@media (max-width: 767px) {
    nav {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    nav a {
        margin-bottom: 1rem;
    }

    .indice {
        width: 100%;
    }

    .footer-info {
        flex-direction: column;
    }

    .footer-info div {
        width: 100%;
    }
}

/* Tablet (entre 768px y 1024px de ancho) */
@media (min-width: 768px) and (max-width: 1024px) {}