.Header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--padding-default);
    background: var(--color-main-darkest);
    position: sticky;
    top: 0;
    z-index: 100;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;

    & a {
        text-decoration: none;
        color: var(--color-lightest);
    }

    & .header-text {
        font-size: 1.5em;
    }

    & 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;
        }
    }
}