#menu-nav {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    box-shadow: 0 0 6px 3px rgba(0, 0, 0, .1);

    .content .links li {
        position: relative;

        a, span {
            font-size: 15px;
            font-family: var(--font-space-grotesk);
            padding: .3rem .5rem;
            border-radius: 4px;
            transition: all .3s;
            color: var(--black);
            display: block;

            &:hover {background-color: rgba(0, 0, 0, .05);}
            &.logout {
                color: var(--clr-error);
                font-weight: 500;
            }
        }

        &:hover > ul { display: flex; }
        & > ul {
            position: absolute;
            left: 0;
            top: 2rem;
            background-color: var(--white);
            box-shadow: 0 0 6px 3px rgba(0, 0, 0, .1);
            padding: .4rem;
            border-radius: 6px;
            width: 150px;
            flex-direction: column;
            gap: .2rem;

            li a, li span { font-size: 14px; }
            form { margin: 0; }
        }
    }
}

@media (max-width: 1280px) {
    #menu-nav .content .links li > ul {
        right: 0;
        left: auto;
    }
}

@media (max-width: 550px) {
    #menu-nav .content {
        .logo img { width: 90px; }

        #menu-trigger { display: flex; }

        .links {
            transform: rotateX(90deg);
            transform-origin: top;
            transition: all .3s;
            position: absolute;
            left: 0;
            top: 65px;
            width: 100%;
            padding: 1rem;
            background-color: rgba(255, 255, 255, .6);
            backdrop-filter: blur(4px);
            border-radius: 0 0 8px 8px;
            border-bottom: 3px solid rgba(0, 0, 0, .5);

            &.active { transform: rotateX(0); }

            li > ul {
                position: relative;
                display: flex;
                top: .4rem;
                left: 1.5rem;
                padding: 0;
                background-color: transparent;
                box-shadow: none;
            }
        }   
    }
}