#topbar {
    display:none;
    background-color: var(--white);
}

#topbar a {
    text-decoration: none;
    color:var(--purple);
}

#topbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position:relative;
}

#topbar .container > #drappedLogoWrapper {
    position: absolute;
    top: 0;
    z-index: 1000;
    line-height:0; /* for safari */
}

#topbar > .container > div {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width:100%;
    padding:calc(.25 * var(--space)) 0;
}

body.is-logged-in #topbar > .container > div > span:nth-of-type(2),
body:not(.is-logged-in) #topbar > .container > div > span:nth-of-type(1) {
    display:flex;
    gap:4px;
}

@media (min-width:1000px) {
    #topbar {
        display:block;
    }

    #topbar .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: var(--space);
        padding-right: var(--space);
    }
}