.Header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--padding-default);
    box-shadow: var(--box-shadow-z2);

    & strong {
        font-size: 2em;
        & span {
            color: var(--color-main);
        }
    }

    & 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-white);
        font-size: 2em;
        align-items: end;
        z-index: 100;
    }

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