/* Variables */
:root {
    --header-bar-height: 3.5rem;
    --header-bar-height-offset: 2.5rem;
}

/* Header bar styling: bar */
.header-bar {
    display: flex;
    width: var(--screen-width);
    height: var(--navbar-height-offset);
    padding: .25rem .5rem 1.25rem .5rem;
    border: none;
    background-image: linear-gradient(0deg, rgba(35, 35, 35, 0), rgba(35, 35, 35, 1) 1.0rem);
    justify-content: center;
}

.header-text {
    line-height: 1rem;
    padding: .5rem 0rem;
    font-family: 'Futura-Medium-Bt';
    color: #ffffff;
}

/* header bar styling: brand/logo */
.header-bar .header-bar-brand {
    position: relative;
    display: inline-block;
    width: 2rem;
    height: 2rem;
    padding: 0;
    margin-right: 1rem;
}

.header-bar .header-bar-logo {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}


/* Header bar content padder that will take up the space behind the header bar */
.header-bar-content-padder {
    height: var(--header-bar-height-offset);
}