:root {
    --rojo-mareabrava: #E24839;
    --azul-mareabrava: #1F3C84;
    --amarillo-mareabrava: #F8B133;
}
.nav-container{
    position: fixed;    
    top: 0;              
    left: 0;
    height: 13vh;
    overflow: hidden;
    z-index: 15; 
    width: 100%;
}
.nav{
    height: 4rem;
    display: flex;
    align-items: center;
    background: var(--azul-mareabrava);
}
.nav .logo{
    width: 10%;
}
.opciones{
    width: 100%;
}
.opciones button{
    background: none;
    border: none;
    color: #FFFFFF;
    padding: 1rem;
}
.opciones button:hover{
    background: #0F2C74;
}
.wave-img {
    position: absolute;
    width: 200%;
    background-image: url(../images/ola.webp);
    background-repeat: repeat no-repeat;
    background-position: 0 bottom;
    background-size: 50% 50px;
    transform-origin: center bottom;
    animation: move_wave 20s linear infinite;
    height: 2rem;
}
@media(max-width:769px){
    .nav .logo{
        width: 25%;
    }
}
@keyframes move_wave{
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-25%);
    }
    100% {
        transform: translateX(-50%);
    }
}