/*#######################*/
/*## CUSTOM PROPERTIES ##*/
/*#######################*/

#menuContainer {
    --spacing-left: 4em;
}

/*############*/
/*## MOBILE ##*/
/*############*/

#menuLogo,
#legalLinksContainer {
    display: none;
}

#menuContainer {
    background-color: var(--clr-menu-bg);   
    color: var(--clr-gray-500);
}

#menuNavContainer {
    display: flex;
    gap: unset;
    justify-content: space-around;
}

.menu-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 4.3em;
    justify-content: end;
    padding: 0.5em;
    border-radius: 0.5em;
}

.menu-nav-item:active {
    background-color: var(--clr-menu-hover);
    color: white;
}

.menu-nav-item-marked {
    background-color: var(--clr-menu-hover);
    color: white;
}

img.menu-nav-icon {
    height: 1.8em;
}


/*#############*/
/*## DESKTOP ##*/
/*#############*/

@media (1010px < width) {

    #menuLogo,
    #legalLinksContainer {
        display: unset;
    }

    #menuContainer {
        position: relative;
    }

    #menuLogo {
        display: block;
        margin: 0 auto;
        margin-top: clamp(1rem, -0.588rem + 5.647vh, 4rem);
    }

    #menuNavContainer {
        display: block;
        margin-top: clamp(0rem, -3.706rem + 13.176vh, 7rem);   
    }

    .menu-nav-item {
        flex-direction: row;
        gap: 0.5em;
        padding: 0.5em var(--spacing-left);
        border-radius: unset;
        justify-content: unset;
    }

    .menu-nav-item:hover {
        background-color: var(--clr-menu-hover);
        color: white;
    }

    #legalLinksContainer {
        position: absolute;
        left: var(--spacing-left);
        bottom: clamp(1rem, -0.588rem + 5.647vh, 4rem);
        display: flex;
        flex-direction: column;
    }

    .legal-link {
        color: rgba(205, 205, 205, 1);
        margin-top: clamp(0.5rem, 0.235rem + 0.941vh, 1rem);
        text-decoration: none;
        cursor: pointer;
    }

    .legal-link:hover {
        color: #29ABE2;
        font-weight: bold;
    }

}

@media (max-width: 500px) {
    .menu-nav-text {
        margin: 0;
    }
}