.Header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--padding-default);
    background-color: rgba(255 255 255 / .8);
    backdrop-filter: blur(10px);
    box-shadow: var(--box-shadow-z2);
    color: var(--color-darkest);
    position: sticky;
    top: 0;
    z-index: 100;

    & strong {
        font-size: 2em;

        & span {
            color: var(--color-main-dark);
        }
    }

    & input[type="checkbox"] {
        display: none;
    }

    & input[type="checkbox"]:checked + nav {
        translate: 0;
    }

    & nav,
    & ul {
        gap: 1em;
    }

    & nav {
        position: fixed;
        padding: var(--padding-default);
        translate: 100% 0;
        width: 100vw;
        right: 0;
        top: 0;
        height: 100dvh;
        transition: 150ms ease-in-out;
        background: var(--color-lightest);
        font-size: 2em;
        align-items: end;
        z-index: 100;
    }

    & ul {
        width: 100%;
        align-items: center;
        & li {
            list-style: none;
        }
    }
}