body {
    font-family: 'Poppins', sans-serif;
    background-color: rgb(255, 249, 224);
}

.navbar-brand img {
    max-height: 80px;
    /* Ajusta el tamaño del logo */
}

.navbar {
    background-image: /* Rayas amarillas claras y oscuras */
    repeating-linear-gradient( 130deg, #ffeb3b, #ffeb3b 10px, #fbc02d 10px, #fbc02d 20px), /* División diagonal entre negro y rayas */
    linear-gradient( 45deg, black 50%, transparent 50%);
    background-blend-mode: overlay;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.navbar-nav {
    align-items: center;
}

.shalf {
    color: #000;
}

.fhalf {
    color: #fff;
}

.navbar-nav .nav-link {
    font-size: 1lh;
    /* Texto blanco */
}

.navbar-nav .nav-link:hover {
    color: #ccc;
    /* Sombra ligera al pasar el mouse */
}

.navbar-dark .navbar-toggler {
    border-color: transparent;
    /* Elimina el borde del botón hamburguesa */
}

.menu {
    max-width: 90%;
    margin: 0px 0;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    align-items: center;
}

.flag-container {
    display: flex;
    justify-content: center;
    margin: 40px 0;
}

.flag {
    width: 1000px;
    height: 100px;
    display: flex;
    align-content: center;
}

.columna {
    width: 100%;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #78abdd 0% 33.3%, white 33.3% 66.7%, #78abdd 66.7% 100%);
    animation: upDown 800ms infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    animation-fill-mode: backwards;
}

.columna:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    overflow: hidden;
}

.columna:last-child {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    overflow: hidden;
}

@keyframes upDown {
    from {
        transform: translateY(2.5px);
    }
    to {
        transform: translateY(-2.5px);
    }
}

.columna:nth-child(1) {
    animation-delay: 50ms;
}

.columna:nth-child(2) {
    animation-delay: 100ms;
}

.columna:nth-child(3) {
    animation-delay: 150ms;
}

.columna:nth-child(4) {
    animation-delay: 200ms;
}

.columna:nth-child(5) {
    animation-delay: 250ms;
}

.columna:nth-child(6) {
    animation-delay: 300ms;
}

.columna:nth-child(7) {
    animation-delay: 350ms;
}

.columna:nth-child(8) {
    animation-delay: 400ms;
}

.columna:nth-child(9) {
    animation-delay: 450ms;
}

.columna:nth-child(10) {
    animation-delay: 500ms;
}

.columna:nth-child(11) {
    animation-delay: 550ms;
}

.columna:nth-child(12) {
    animation-delay: 600ms;
}

.columna:nth-child(13) {
    animation-delay: 650ms;
}

.columna:nth-child(14) {
    animation-delay: 700ms;
}

.columna:nth-child(15) {
    animation-delay: 750ms;
}

.columna:nth-child(16) {
    animation-delay: 800ms;
}

.columna:nth-child(17) {
    animation-delay: 850ms;
}

.columna:nth-child(18) {
    animation-delay: 900ms;
}

.columna:nth-child(19) {
    animation-delay: 950ms;
}

.columna:nth-child(20) {
    animation-delay: 1000ms;
}

.columna:nth-child(21) {
    animation-delay: 1050ms;
}

.columna:nth-child(22) {
    animation-delay: 1100ms;
}

.columna:nth-child(23) {
    animation-delay: 1150ms;
}

.columna:nth-child(24) {
    animation-delay: 1200ms;
}

.columna:nth-child(25) {
    animation-delay: 1250ms;
}

.columna:nth-child(26) {
    animation-delay: 1300ms;
}

.columna:nth-child(27) {
    animation-delay: 1350ms;
}

.columna:nth-child(28) {
    animation-delay: 1400ms;
}

.columna:nth-child(29) {
    animation-delay: 1450ms;
}

.columna:nth-child(30) {
    animation-delay: 1500ms;
}

.columna:nth-child(31) {
    animation-delay: 1550ms;
}

.columna:nth-child(32) {
    animation-delay: 1600ms;
}

.columna:nth-child(33) {
    animation-delay: 1650ms;
}

.columna:nth-child(34) {
    animation-delay: 1700ms;
}

.columna:nth-child(35) {
    animation-delay: 1750ms;
}

.columna:nth-child(36) {
    animation-delay: 1800ms;
}

.columna:nth-child(37) {
    animation-delay: 1850ms;
}

.columna:nth-child(38) {
    animation-delay: 1900ms;
}

.columna:nth-child(39) {
    animation-delay: 1950ms;
}

.columna:nth-child(40) {
    animation-delay: 2000ms;
}

@media(max-width: 700px) {
    .shalf {
        color: #fff;
    }
    img {
        max-width: 90%;
    }
    .navbar-brand img {
        max-height: 100px;
        /* Ajusta el tamaño del logo */
    }
    .flag {
        width: 250px;
        height: 80px;
        display: flex;
        align-content: center;
    }
    .columna {
        width: 100%;
        display: flex;
        align-items: center;
        background: linear-gradient(to bottom, #78abdd 0% 33.3%, white 33.3% 66.7%, #78abdd 66.7% 100%);
        animation: upDown 500ms infinite;
        animation-direction: alternate;
        animation-timing-function: ease-in-out;
        animation-fill-mode: backwards;
        font-size: 0.5lh;
    }
}