.navbar{
    position: fixed;
    left: 0px;
    top: 0px;

    padding: var(--spacer-6) var(--spacer-4) var(--spacer-4) var(--spacer-4);
    z-index: 999;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacer-2);
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

.navbar-header{
    display: flex;
    align-items: center;
    gap: var(--spacer-4);
}

.navbar-header span{
    font-size: var(--spacer-4);
    line-height: var(--spacer-4);
    text-align: center;
    font-weight: 600;
    position: absolute;
    left: 0px;
    width: 100%;
}


.navbar nav{
    display: flex;
    gap: var(--spacer-4);
    align-items: center;
    position: absolute;
    right: var(--spacer-4);
    top: var(--spacer-6);
}

.navbar--solid{
    background: var(--bg2);
}

.navbar--home{
    background: transparent;
    box-shadow: none;
}

.navbar--home.navbar--scrolled{
    background: var(--bg2);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}