.Menu {
    --Mdir: row;
    --Mw: auto;
    --Mh: auto;
    width: var(--Mw);
    height: var(--Mh);
    transform: var(--Mtrans);
    flex-direction: var(--Mdir)
}

.Menu>ul {
    display: flex;
    flex-direction: inherit;
    overflow: hidden;
    max-width: 100vw
}

.Menu li {
    position: relative;
    display: flex;
    align-items: center
}

.Menu :where(a,span) {
    display: flex;
    padding: var(--menu-el-padd);
    color: currentColor;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.Menu :where(a,span) {
    position: relative;
    overflow: hidden;
    border-radius: 2em;
}
.Menu :where(a,span):before {
    content: "";
    position: absolute;
    bottom: 20%;
    left: 40%;
    width: 20%;
    height: 40%;
    opacity: 0;
    transition: all ease-out 0.3s;
    background: var(--brand-lite);
    border-radius: inherit;
    z-index: -1;
}


.Menu a:hover:before {
    transform: scale(6);
    opacity: .2;
}

.Menu span { pointer-events: none; color: var(--brand-dark); border: var(--brand-lite) .5px solid;}
input~.Menu {
    padding-top: 0
}

input:checked~.Menu {
    padding-top: var(--Hdr-h);
    z-index: -1;
    --Mdir: column;
    position: absolute;
    --Mw: 100vw;
    --Mh: 110vh;
    --Mtrans: var(--Mtrans0);
    --vis: visible;
    opacity: var(--op);
    padding-top: var(--Hdr-h);
    transition: all ease 0.3s;
    background: var(--Hdr-bg);
    left: 0;
    -webkit-backdrop-filter: var(--menu-backdrop);
    backdrop-filter: var(--menu-backdrop);
    left: -20px;
    top: -20px;
}

input:checked~.Menu ul {
    font-size: 1.2em
}
input:checked~label {
    display: block
}
.Burger {
    line-height: 0
}
.Burger:after {display: none;}
.Burger svg {
    width: 3em;
    height: 3em;
    pointer-events: none
}
.Burger .o {
    position: absolute
}
.Burger .x {
    transform: scale(0);
    transition: transform 0.4s
}
.Burger path {
    stroke: currentColor;
    fill: none;
    transform-origin: 50%;
    stroke-dasharray: var(--Brgr-da);
    stroke-dashoffset: var(--Brgr-do);
    stroke-width: 4px;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke-dasharray 500ms 200ms,stroke-dashoffset 500ms 200ms,transform 500ms 200ms
}
.Burger .l2 {
    --Brgr-da: 40 200;
    --Brgr-do: 0px
}
.Burger .l3 {
    --Brgr-da: 40 179;
    --Brgr-do: 0px
}
input:checked~.Burger .x {
    transform: scale(1);
    transition: transform 0.4s 0.3s
}
input:checked~.Burger path {
    transition: stroke-dasharray 0.4s,stroke-dashoffset 0.4s,transform 0.4s;
}
input:checked~.Burger .l1 {
    transform: scale(0,1);
    transition: transform 0.3s 0.1s
}
input:checked~.Burger .l2 {
    --Brgr-da: 5px 200;
    --Brgr-do: -164px
}
input:checked~.Burger .l3 {
    --Brgr-da: 5px 179;
    --Brgr-do: -142px
}