/* The main menu bar container */
#main-menu {
    margin-top: 5px; /* spacing from top logo */
    margin-bottom: 10px; /* spacing from content */
    height: 60px; /*size*/
    width: 99.5%; /*size prevent overflow*/
    display: flex; /* Horizontal layout, align-items will not work without this definition */
    align-items: center; /* Vertical centering */
   /* gap: 10px; /* space between menu buttons */
    padding: var(--decoration-menu-panel-row-padding); /* padding for whole button row from sides*/

    background-color: var(--decoration-menu-panel-background-color);
    border: var(--decoration-menu-panel-border); /* border */
    border-radius: var(--decoration-menu-panel-border-radius); /* border curvature*/
    box-shadow: var(--decoration-menu-panel-shadow); /* shadow */
    box-sizing: var(--decoration-menu-panel-box); /* padding and border is part of window height or not*/
    overflow: hidden; /* no scroling in menu bar */
}

/* manu buttons common settings */
/* also animation in normal state */
[name="main-menu-l-common"] {
    font-family: var(--decoration-menu-button-font); /* font for buttons and the 2 failsafes */
    text-transform: uppercase; /* capitalize text or not */
    font-weight: var(--decoration-menu-button-weight); /* weight of font normal, bold etc*/
    font-size: var(--decoration-menu-button-font-size);
    text-decoration: var(--decoration-menu-button-decoration);

    padding: var(--decoration-menu-button-padding); /* padding inside buttons */
    border: var(--decoration-button-border);
    border-radius: var(--decoration-button-radius); /* buttons roundness */
    /* background-color: var(--decoration-basic-color-background); */
    margin-right: 10px; /* replaces gap - space between menu buttons*/
    
    box-shadow: var(--decoration-button-shadow-normal);
    transform: var(--decoration-button-transform-normal);
    transition: var(--decoration-button-animation-normal);
}

/* HOVER STATE: button hovered */
[name="main-menu-l-common"]:hover {
    transform: var(--decoration-button-transform-hover);
    box-shadow: var(--decoration-button-shadow-hover);
    border: var(--decoration-button-border-hover);
}

/* ACTIVE STATE: button pressed */
[name="main-menu-l-common"]:active {
    transform: var(--decoration-button-transform-pressed); 
    box-shadow: var(--decoration-button-shadow-pressed); 
    transition: var(--decoration-button-animation-pressed);
    border: var(--decoration-button-border-pressed);
}

/* Individual menu button(in truth links) color styling */
/* that is why main color atribute colors text */

/* aka home */
#main-menu-l1 {
    color: var(--decoration-menu-button-text-color-l1); 
    background-color: var(--decoration-menu-button-background-color-l1); 
}

#main-menu-l1:hover {
    color: var(--decoration-menu-button-text-color-l1); 
    background-color: var(--decoration-menu-button-background-color-l1-hover); 
}

#main-menu-l1:active {
    color: var(--decoration-menu-button-text-color-l1-pressed); 
    background-color: var(--decoration-menu-button-background-color-l1-pressed); 
}

#main-menu-l2 { 
    color: var(--decoration-menu-button-text-color-l2);
    background-color: var(--decoration-menu-button-background-color-l2);  
}

#main-menu-l2:hover {
    color: var(--decoration-menu-button-text-color-l2); 
    background-color: var(--decoration-menu-button-background-color-l2-hover); 
}

#main-menu-l2:active {
    color: var(--decoration-menu-button-text-color-l2-pressed); 
    background-color: var(--decoration-menu-button-background-color-l2-pressed); 
}

#main-menu-l3 {
    color: var(--decoration-menu-button-text-color-l3); 
    background-color: var(--decoration-menu-button-background-color-l3); 
}

#main-menu-l3:hover {
    color: var(--decoration-menu-button-text-color-l3-hover); 
    background-color: var(--decoration-menu-button-background-color-l3-hover); 
}

#main-menu-l3:active {
    color: var(--decoration-menu-button-text-color-l3-pressed); 
    background-color: var(--decoration-menu-button-background-color-l3-pressed); 
}

#main-menu-l4 { 
    color: var(--decoration-menu-button-text-color-l4); 
    background-color: var(--decoration-menu-button-background-color-l4); 
}

#main-menu-l4:hover { 
    color: var(--decoration-menu-button-text-color-l4-hover); 
    background-color: var(--decoration-menu-button-background-color-l4-hover); 
}

#main-menu-l4:active {
    color: var(--decoration-menu-button-text-color-l4-pressed); 
    background-color: var(--decoration-menu-button-background-color-l4-pressed); 
}

#main-menu-l5 { 
    color: var(--decoration-menu-button-text-color-l5); 
    background-color: var(--decoration-menu-button-background-color-l5); 
}

#main-menu-l5:hover { 
    color: var(--decoration-menu-button-text-color-l5-hover); 
    background-color: var(--decoration-menu-button-background-color-l5-hover); 
}

#main-menu-l5:active {
    color: var(--decoration-menu-button-text-color-l5-pressed); 
    background-color: var(--decoration-menu-button-background-color-l5-pressed); 
}