.Header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-main-darkest);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: var(--padding-default);

    & .logo {
        height: 40px;
    }

    & header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        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;
            }
        }
    }

    &:after, &:before {
        content: '';
        display: block;
        position: absolute;
        bottom: calc(-1 * var(--radius-border));
        background: var(--color-blue-darkest);
        width: var(--radius-border);
        height: var(--radius-border);
    }

    &:after {
        right: 0;
        mask: radial-gradient(var(--radius-border) at 0 100%,#0000 98%,#000);
    }

    &:before {
        left: 0;
        mask: radial-gradient(var(--radius-border) at 100% 100%,#0000 98%,#000);
    }
}