nav.main-menu {
    
    ul {
        list-style-type: none;
        padding: 0;
        margin: 0;

        li {
            list-style-type: none;
            font-weight: var(--fw-bold);

            position: relative;


            a {
                color: var(--neutral-light);
                text-decoration: none;
            }
        }

    }

    > ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: flex-start;
        gap: var(--margin-m);

        > li > ul {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: flex-start;
            gap: var(--margin-m);
            
            visibility: hidden;
            z-index: 10;
            position: absolute;
            top: calc(var(--fc-h3) + var(--margin-s) - (var(--border-width) * 1));
            left: calc(var(--border-width) * -1);
            width: clamp(200px, 12vw, 600px);
            padding: var(--margin-m);
            
            background-color: var(--background2);
            border-top: var(--border-width) solid var(--neutral-dark);
            -webkit-box-shadow: 0px 10px 12px 5px rgba(51,51,51,0.3); 
            box-shadow: 0px 10px 12px 5px rgba(51,51,51,0.3);

            transition: all 0.1s ease-in-out;
        }

        > li {
            border-left: var(--border-width) solid transparent;
            padding-left: var(--margin-s);
            padding-bottom: var(--margin-s);
            line-height: var(--fc-h3);
        }

        > li:hover {
            border-left: var(--border-width) solid var(--neutral-dark);

        }

        > li:hover ul {
            visibility: visible;
            border-right: var(--border-width) solid var(--neutral-dark);
            
        }
    }
}