.navbar{
    position: fixed;
    top: 2rem;
    left:50%;
    transform: translateX(-50%);
    display: flex;
    padding: 0.5rem;
    gap: 4rem;
    background-color: var(--white64);
    backdrop-filter: blur(1rem);
    border-radius: 0.5rem;
    z-index: 10;
    width: max-content;
    white-space: nowrap;
    border: solid 1px var(--colormid16);
}
.navbar .btn.primary{
    color: var(--colormid);
    background-color: unset;
    flex-shrink: 0;
}
.navbar .btn.primary:hover{
    color: var(--white);
    background-color: var(--colormid);
}
.navbar .btn.primary path{
    fill: var(--colormid);
}
.navbar .btn.primary:hover path{
    fill: var(--white);
}
.burger{
    position: fixed;
    width: 3.25rem;
    height: 3.25rem;
    display: none;
    flex-wrap: wrap;
    gap: 0.25rem;
    background-color: var(--white64);
    top: 1rem;
    right: 1rem;
    padding: 0.5rem;
    backdrop-filter: blur(1rem);
    border-radius: 0.5rem;
    z-index: 10;
    cursor: pointer;
}
.anchor{
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.shape1{
    width: fit-content;
    height: fit-content;
    padding: 0.125rem;
    background-color: unset;
    border-radius: 0.25rem;
    transition: width 300ms, height 300ms, transform 300ms, background-color 300ms;
}
.shape2{
    width: fit-content;
    height: fit-content;
    padding: 0.125rem;
    background-color: var(--colordark);
    border-radius: 0.125rem;
    transition: width 300ms, height 300ms, transform 300ms, background-color 300ms;
}
.shape3{
    width: 0.625rem;
    height: 0.625rem;
    background-color: unset;
    border-radius: 0.0625rem;
    transition: width 300ms, height 300ms, transform 300ms, background-color 300ms;
}
.burger:hover .active .shape1, .burger.open .active .shape1{
    transform: rotate(-45deg);
    /* width: 1.0625rem; */
}
.burger.open .active .shape3{
    background-color: var(--white64);
    width: 0.5rem;
    height: 0.5rem;
}
@media screen and (max-width: 900px) {
    .navbar{
        top: 5.25rem;
        right: 1rem;
        left: unset;
        transform: translateX(calc(100% + 2rem));
        transition: transform 300ms;
        flex-direction: column;
        padding: 0.5rem;
        gap: 0.5rem;
        white-space: nowrap;
    }
    .navbar.open{
        transform: translateX(0);
    }
    .burger{
        display: flex;
    }
}