/* HEADER TOP BAR (marquee) */
html {
    --topbar-h: 2.5rem;
}
.header-topbar {
    display: flex;
    align-items: center;
    height: var(--topbar-h);
    background: var(--color-black);
    color: var(--color-lbeige);
    overflow: hidden;
}
.header-topbar .marquee-wrapper {
    position: relative;
    width: 100%;
}
.header-topbar .marquee__line {
    justify-content: flex-start;
}
.header-topbar .topbar-item {
    gap: 0.625rem;
    padding: 0 1.75rem;
}
.header-topbar .topbar-icon {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.header-topbar .topbar-item--green .topbar-icon {
    color: var(--color-green);
}
.header-topbar .topbar-item--purple .topbar-icon {
    color: var(--color-purple);
}
.header-topbar .topbar-item--yellow .topbar-icon {
    color: var(--color-yellow);
}
.header-topbar .topbar-text {
    font-size: 0.9375rem;
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--color-lbeige);
}
/* The bar slides away with the header once the page is scrolled. */
#wrapper-navbar.scrolled {
    -webkit-transform: translateY(calc(var(--topbar-h) * -1));
    transform: translateY(calc(var(--topbar-h) * -1));
}
@media (min-width: 768px) {
    .header-topbar .topbar-item {
        padding: 0 2.5rem;
    }
}
@media (min-width: 1200px) {
    html {
        --topbar-h: 2.875rem;
    }
    .header-topbar .topbar-text {
        font-size: 1.0625rem;
    }
    .header-topbar .topbar-icon {
        width: 1.25rem;
        height: 1.25rem;
    }
    .header-topbar .topbar-item {
        padding: 0 3.5rem;
    }
}
/* END HEADER TOP BAR */