#navbar{
    display: grid;

    grid-template-columns: 1fr auto ;
    align-items: center;

    min-height: 60px;
    width: 100%;

    
    position: sticky;
    z-index: 9999999;
    
    top: 0px;    

    background-image: linear-gradient(90deg,  #DDD, #CCC);
    
    box-shadow: 0px 1px 5px #777;
}


/* default */
#mobileMenuActivator{
    display:none;    
    cursor:pointer;
    transition: opacity 0.5s;
    padding: 1rem;
}

#mobileMenuClose{
    font-weight: 600;
    cursor:pointer;
}


#mobileMenuActivator .righetta, #mobileMenuClose .righetta{
    width: 20px;
    height: 3px;
    background-color: steelblue;
    margin-bottom: 2px;
    transition: transform 0.3s;
}

#navbarMenu{ 
    padding-right: 1rem;
}

#navbarMenu .menuContainer{
    display:grid;
    grid-auto-flow: column;

    column-gap: 1rem;

    place-items: center center;   
}

#navbarMenu  .menuContainer .menuItem a{
    width: 1fr;
    
    padding: 0.3rem;
    border-radius: 0.2rem;
    text-decoration: none;
    
    color: #111;

    padding:1rem;


    transition: background-color 0.5s, color 0.5s ;
}

#navbarMenu  .menuContainer .selected{
    
}

#navbarMenu  .menuContainer .menuItem a:hover {
    background-color:#444;
    color:#FFF;
}



#fullPageMenu{
    display:block;
    position: absolute;
    width:100vw;
    height: 100vh;
    
    top: 0px;
    left: -100vw;

    z-index: 11;
    transition: left 0.5s;
    background-color: #030507;    
}


#fullPageMenu .menuContainer{ 
        
    display:grid;
    grid-auto-rows: 1fr;
    place-items: center center;
}    


#fullPageMenu  .menuContainer .menuItem{
    width: 1fr;
    
    padding: 0.3rem;
    border-radius: 0.2rem;

    text-align: center;
    
    transition: background-color 0.3s;

    margin: 10px auto 10px auto;
}

#fullPageMenu  .menuContainer .selected{
    background-color: #C12;
    
}

#fullPageMenu  .menuContainer .menuItem a{
    color: #CCC;
    text-decoration: none;    
}

#fullPageMenu  .menuContainer .menuItem:hover{
    color: #FFF;
    background-color:#D45;
}


@media( max-width:1024px ){
    #mobileMenuActivator{ display:block;}    
    #navbarMenu{ display:none;}    
    
    #fullPageMenu{display: block;}

}   



/*  dropdown */

.dropDown{
    width: 1fr;
    padding: 0.3rem;
    border-radius: 0.2rem;
    text-decoration: none;
    
    color: #111;

    padding:1rem;


    transition: background-color 0.5s, color 0.5s ;
    
}


.dropDown > .subMenu{

    background-image: linear-gradient(#EEE, #FFF);
    border: 1px solid #ccc;
    color: #666;
    display: block;
    position:absolute;

    z-index: 10;

    min-width: 150px;
    
    right: 5px;
    top:10px;

    height:0px;
    opacity: 0;
    overflow:hidden;

    box-shadow: -2px 2px 15px #AAA;

    transition: opacity 0.5s;
    
}

.dropDown:hover > .subMenu{
    display:block;
    height:auto;
    opacity:1;
}

.dropDown:hover > .subMenu .list{
    
    display: grid;
    grid-template-rows: 1fr;
    place-items: center center;
    gap: 1.5rem;
    padding: 1.5rem;

}