header{
    background: var(--shade-color);

    width: 100%;
    height: var(--header-height);

    position: sticky;
    top: 0;

    display: flex;
    flex-direction: row;
    justify-content: space-between;

    z-index: 10;
}

.branding-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.branding-container > .full-logo {
    display: flex;
    flex-direction: row;
}
.branding-container > .full-logo > img {
    height: clamp(1.5rem, 7vw, 2.5rem);
}

.logo-sml{
    margin: 0;
    padding: 0;

    height: 70%;

    margin: 8px;

    border-radius: 50%;
    border: 1px solid rgb(68, 68, 68);
}


header > .cta-btn{
    font-size: clamp(0.75rem, 3vw, 1.5rem);

    margin: 10px;
    padding: 10px 20px;
}
/* TODO - fix scaling so don't have to hide */
/* Even needed? Ever gets this thin? */
@media (width < 350px) {
    header > .cta-btn{
        display: none;
    }
}