main {
    width: 100vw;
}

nav {
    position: relative;
    background: linear-gradient(var(--stripes-left));
    margin-bottom: 1.2rem;
}

.stripe-up::before,
.stripe-up::after,
.stripe-down::before,
.stripe-down::after {
    content: '';
    width: 50%;
    border-style: solid;
    border-color: transparent;
    position: absolute;
    z-index: -6;
}

.stripe-down::before {
    border-style: solid;
    border-width:  var(--stripe-size) 0 0 0;
    border-image: radial-gradient(closest-side, var(--stripes-left), var(--color-bg) 101%);
    border-image-slice: 49% 49% 49% 49%;
    left: 0;
}

.stripe-down::after {
    border-width: var(--stripe-size) 0 0 0;
    border-image: radial-gradient(closest-side, var(--stripes-left), var(--color-bg) 101%);
    border-image-slice: 49% 49% 49% 49%;
    right: 0;
}

.stripe-up,
.stripe-down {
    display: flex;
    position: sticky;
    bottom: 0;
}

.stripe-down {
    position: fixed;
    width: 100%;
}