@import url("/menu/css/controlMenuBarHeight.css");

nav#menucontainer{  
    position:absolute;    
    width:100%;
    height:var(--menubar-height);        
    display:flex;
    align-items:center; 
    z-index:2;
    color:var(--pallete-white);
    font-family:Basic;
}

nav #menubar{
    position:absolute;
    width:100%;
    height:100%;    
    background-color:var(--pallete-1st);
}

nav #logo { 
    width:100%;       
    height:100%;
    z-index:10;
}

nav #logo img{
    height:100%;
    padding:1em;
}

nav #options{
    width:100%;
    height:100%;
    z-index:3;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    margin-right:2.5em;
    gap:2.5em;
    font-weight:600;
    transform-origin:center;
}

nav #menu-icon{
    display:none;
}

#options div{     
    transition:transform 0.3s ease-in-out;
    --menu-colorlink: var(--pallete-black);
}

#options div:hover{    
    --menu-colorlink:var(--pallete-white);
}

#options div a{    
    font-size:1.3em;
    text-decoration:none;
    color:var(--menu-colorlink);
    font-style:italic;
    transition:color 0.3s ease-in-out;
}


@media only screen and (max-width:1100px){
    #options div a{
        font-size:1.5em
    }
}

/*---------------------------------------------------------------------
DISPOSITIVOS MOBILE
----------------------------------------------------------------------*/

@media only screen and (max-width:800px){
    nav #menubar{
        background-color:var(--pallete-1st);
    }

    nav #options{
        position:absolute;
        z-index:-1;
        top:calc(-1px + var(--menubar-height));
        right:0px;
        width:100%;
        max-width:500px;
        height:auto;
        margin-right:0;
        padding:2em 0px;
        display:block;      
        font-family:Basic;
        font-weight:600;
        background-color:var(--pallete-grey);
        border-left:2px solid var(--pallete-1st);
        border-bottom:2px solid var(--pallete-1st);
        transform-origin:top;
        transform:translateY(-100%);
    }

    #options div{
        width:100%;
        max-width:500px;
        min-height:50px;
        padding:0px 2em;
        display:flex;
        justify-content:center;
        align-items:center;
    }

    #options div a{
        color:var(--pallete-white);
    }

    #options div:hover{
        border-bottom:0px;
        background-color:var(--pallete-black);
    }

    nav #menu-icon{
        width:100%;
        display:flex;
        justify-content:flex-end;
        align-items:center;
        z-index:3;
        font-weight:600;        
        margin-right:1.8em;
        color:var(--pallete-black);
        font-style:italic;
    }

    #menu-icon div{
        display:flex;
        justify-content: center;
        align-items: center;
        font-size:1.75em;
    }

    #menu-icon div span{
        font-size:1.75em;
        margin-left:0.25em;
    }
}

@media only screen and (max-width:500px){
    nav #options{        
        border-left:0px;
        border-bottom:0px;
    }
}

@media only screen and (max-width:400px){
    #options div a{
        font-size:1.75em
    }

    #menu-icon div{        
        font-size:2em;
    }

    #menu-icon div span{
        font-size:1.75em;
    }
}