header {
    position:fixed;
    width:100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap:wrap;
    background: transparent;
    background: linear-gradient(0deg, transparent, rgba(var(--lrs-black),1));
    gap: 8px 16px;
    padding: 24px 32px;
    z-index: 101;
}

@media (pointer: coarse){
    header {
        background: transparent;
        background: linear-gradient(0deg, transparent, rgba(var(--lrs-black),1));
    }
}

.navFlex {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    order: 1;
}

.menuBars{
    order: 1;
    color: rgba(var(--lrs-monochrome-1),1);
    display: none;
    cursor: pointer;
    opacity: 0.9;
    transition: 0.2s;
    font-size: 24px;
}

.menuBars:hover{
    opacity: 1;
}

.navFlex.right{
    row-gap: 32px;
    column-gap: 16px;
}

.navFlex::-webkit-scrollbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: transparent;
    height: 4px;
}

.navFlex::-webkit-scrollbar-thumb {
    background: rgba(var(--lrs-black), 0.5);
    border-radius: 2px;
}
@media only screen and (max-width:600px) {

    header{
        --headerHeight: 75px;
        padding: 16px;
        justify-content: space-between;
        height: var(--headerHeight);
        background:rgba(var(--lrs-black),1);
        border-bottom: 3px solid rgb(var(--lrs-green-3));
    }
    .navFlex {
    }
    .menuBars{
        display: block;
    }
    .navFlex.left{
        justify-content: center;
    }
    .navFlex.right{
        align-items: flex-end;
        flex-direction: column;
        justify-content: flex-start;
        padding: 8px 16px 0px 32px;
        position: fixed;
        right:0;
        top:var(--headerHeight);
        height:100%;
        background: rgba(var(--lrs-black),1);
        border-left: 3px solid rgb(var(--lrs-green-3));
        transition: 0.75s;
        transform: translateX(100%);
    }

    .navFlex.right.toggled {
        transform: translateX(0%);
    }

}
.logoHolder {
    --logoHeight: calc(1.618 * 1.618rem);
    --navbarPadding: 8px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    width: max-content;
    justify-self: flex-start;
    user-select: none;
}

.logoHolder .logoBox {
    height: var(--logoHeight);
    user-select: none;
}


.navButton.bgButton{
    background: rgb(var(--lrs-green-2));
    color: rgba(var(--lrs-black));
}
.navButton{
    font-size: 1rem;
    font-family: Work Sans;
    font-weight: 600;
    border-radius: 2px;
    color: rgba(var(--lrs-monochrome-1),1);
    cursor: pointer;
    transition: 0.25s;
    user-select: none;
    padding: 8px 12px;
    border: 2px solid rgba(var(--lrs-green-2),0);
    white-space: nowrap;
    text-decoration-color: transparent;
}
.navButton:not(.bgButton):hover{
    border: 2px solid rgba(var(--lrs-green-1),1);
    text-decoration-color: rgba(var(--lrs-monochrome-1),1);
}
.navButton:not(.bgButton):active{
    border: 2px solid rgba(var(--lrs-green-3),1);
    transform: scale(0.95);
}
.navButton.bgButton:hover{
    background: rgb(var(--lrs-green-1));
    text-decoration-color: rgba(var(--lrs-black));
}
.navButton.bgButton:active{
    background: rgb(var(--lrs-green-3));
    transform: scale(0.95);
}