/* § ACCESSIBILITY (A11Y) */
.a11y-offscreen {
    /* Don't show on screen.
    This class is used to place elements that are required for
    accessibility purposes off the screen in graphic Web browsers,
    while keeping the element available for screen readers and text
    browsers.
    */
    position: absolute;
    left: -50000px;
}

/* § CONTAINMENT */
#content-box {
    box-sizing: border-box;
    padding: 1rem;
}

.grid {
    display: flex;
    flex-flow: row wrap;
    gap: 3em;
}

.shelf {
    display: flex;
}


/* § BACKGROUNDS */
.bg-waves {
    background-image: var(--wave-pattern);
    background-position: bottom;
}

/* § POSITIONING */

.block-centered {
    margin: auto;
}

/* SIZING */
.flex-auto {
    flex: auto;
}

.flex-initial {
    flex: initial;
}

.limit-width {
    max-width: 900px;
}

.responsive-image {
    display: block;
    height: auto;
    max-width: 100%;
}

/* APPEARANCE */
.bold {
    font-weight: bold;
}

.dim-text {
    color: var(--dim-color);
}

.dimmer-text {
    color: var(--dimmer-color);
}

.faded {
    opacity: 0.5;
}



@media screen and (min-width: 800px) {
    #content-box {
        padding: 2rem;
    }
}