#menu-nav {
    position: fixed;
    z-index: 999;
    box-shadow: 0 0 6px 3px rgba(0, 0, 0, .05);

    .content {
        padding: .8rem  1rem .7rem;

        .links ul li a {
            font-size: 15px;
            font-weight: 400;
            padding: .5rem .8rem;
            transition: all .2s;
            border-radius: 6px;
            display: block;

            &.highlight {
                margin-left: .5rem;
                background-color: var(--black);
                color: var(--white);

                &:hover {
                    transform: scale(1.05);
                }
            }
            
            &:not(.highlight):hover {background-color: rgba(0, 0, 0, .05);}
        }

        .menu-trigger svg {
            width: 24px;
            height: 24px;
        }
    }
}

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

        .links {
            position: absolute;
            top: 69px;
            left: 0;
            background-color: var(--light-grey);
            z-index: -1;
            padding: 1rem 1rem;
            border-radius: 0 0 16px 16px;
            border-bottom: 3px solid var(--black);
            transform: rotateX(90deg);
            transform-origin: top;
            transition: all .3s;

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

            &, ul {width: 100%;}

            ul {
                flex-direction: column;

                li {
                    &, a {width: 100%;}   

                    a {text-align: center;}
                }
            }
        }

        .menu-trigger {
            display: flex;
        }
    }
}