.header-or-footer-bar
{
    /* `display` not set to `flex` here (as a reminder to maintainers, not for technical reasons) despite `align-items`
       being set here because the value will be changed to `none` by media queries when hiding the footer on large
       screens */
    align-items: center;
    width: 100%;
    background-color: #800080;
    z-index: 4; /* above the universe. see doc/z-index.md */
    flex-shrink: 0; /* Something about the scroll bar appearing for large blurb text makes the flexbox of
                           main-container attempt to shrink the header and footer bars. With the default flex-shrink
                           value of 1, the bars will oblige and reduce height if the scroll bar is showing. This makes
                           the bars an inconsistent size depending on whether the blurb text is long or short. It also
                           makes the bars jitter when transitioning from showing piece info and not showing piece info.
                           Setting this value to 0 keeps the header and footer bar at constant size no matter whether
                           the scroll bar is showing or not. */
}

#header
{
    display: flex; /* set here and not in `.header-or-footer-bar` for reasons mentioned in `.header-or-footer-bar` */
    justify-content: space-between;
}

#title
{
    margin-left: calc(5px + .5vw);
    margin-right: 2vw;
}

/* ui controls in the header bar */
#header-non-title
{
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: space-around;
    flex-grow: 1;
}

#header-non-title > *
{
    cursor: pointer; /* using icons and text as ui buttons, so change cursor to communicate elements are clickable */
}

#background-toggle-on
{
    display: none; /* icon is shown to click to turn background hex rendering on, and bg rendering is initially on */
}

.slider
{
    -webkit-appearance: none; /* make a think slider track in Chrome to match the thick slider track in Mozilla */
    border-radius: 12px; /* rounded corners on the edge of slider bar */
    background: gray;
    outline: none;
    margin-top: auto;
    margin-bottom: auto;
}

#slider-header
{
    height: 5mm;
    width: 15vw;
}

#slider-footer
{
    font-size: 7mm;
    width: 40vw;
    height: 6mm;
}

.slider:invalid {
    box-shadow: none;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    height: 6mm;
    width: 6mm;
}

.slider::-moz-range-thumb
{
    border-radius: 50%;
    background: white;
    cursor: pointer;
    box-shadow:none;
    height: 6mm;
    width: 6mm;
}

@keyframes background-blink
{
    0%
    {
        background: gray;
    }

    25%
    {
        background: orange;
    }

    50%
    {
        background: orange;
    }

    100% {
        background: gray;
    }
}