header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;

    nav {
        padding: 24px var(--side-padding);
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #090809e6;
        backdrop-filter: blur(8px);
        border-bottom: 1px solid transparent;
        transition: 0.3s border-color;

        .logo {
            font-size: 28px;
            z-index: 10001;
            position: relative;
        }

        #toggle-nav {
            display: none;
        }

        ul {
            list-style: none;
            display: flex;
            gap: 32px;

            a {
                color: #fff;
                font-size: 16px;
                font-weight: bold;
                text-decoration: none;
            }
        }
    }

    nav.scrolled { border-color: #2c2c2c; }

    @media screen and (max-width: 600px) {
        nav {
            padding: 24px;

            #toggle-nav {
                display: block;
                position: relative;
                z-index: 1001;
                width: 40px;
                height: 40px;
                background-color: transparent;
                border: none;
                color: #fff;

                svg { fill: #ffffff; }
            }

            ul {
                position: fixed;
                z-index: 1000;
                top: 0;
                left: 100vw;
                width: 100vw;
                --nav-height: 89px;
                height: calc(100dvh - var(--nav-height));
                margin-top: var(--nav-height);
                background-color: #0E0E0EDD;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 32px;
                transition: left 0.4s ease-in;

                a { font-size: 30px; }
            }

            ul.enabled {
                left: 0;
                transition: left 0.4s ease-out;
            }
        }
    }
}