.background-1 {
    background: #202020;
}

.background-2 {
    background: #D0D0D0;
}

.background-3 {
    background: #E0E0E0;
}

.background-4 {
    background: #F0F0F0;
}

.background-5 {
    background: #800000;
}

.background-6 {
    background: #FF0000;
}

.background-7 {
    background: #808000;
}

.background-8 {
    background: #FFFF00;
}

.background-9 {
    background: #006030;
}

.background-10 {
    background: #008040;
}

.background-11 {
    background: #008080;
}

.background-12 {
    background: #00FFFF;
}

.background-13 {
    background: #000080;
}

.background-14 {
    background: #0000FF;
}

.background-15 {
    background: #800080;
}

.background-16 {
    background: #FF00FF;
}

.flow,
.row {
    display: flex;
    flex-flow: column;
    gap: 1.5em;
}

.foreground-1 {
    color: #202020;
}

.foreground-2 {
    color: #D0D0D0;
}

.foreground-3 {
    color: #E0E0E0;
}

.foreground-4 {
    color: #F0F0F0;
}

.foreground-5 {
    color: #800000;
}

.foreground-6 {
    color: #FF0000;
}

.foreground-7 {
    color: #808000;
}

.foreground-8 {
    color: #FFFF00;
}

.foreground-9 {
    color: #006030;
}

.foreground-10 {
    color: #008040;
}

.foreground-11 {
    color: #008080;
}

.foreground-12 {
    color: #00FFFF;
}

.foreground-13 {
    color: #000080;
}

.foreground-14 {
    color: #0000FF;
}

.foreground-15 {
    color: #800080;
}

.foreground-16 {
    color: #FF00FF;
}

.letterbox-1,
.windowbox-1 {
    padding-block: 1.5em;
}

.letterbox-2,
.windowbox-2 {
    padding-block: 2.25em;
}

.letterbox-3,
.windowbox-3 {
    padding-block: 3.375em;
}

.letterbox-4,
.windowbox-4 {
    padding-block: 5.0625em;
}

.middle {
    text-align: center;
}

.pillarbox-1,
.windowbox-1 {
    padding-inline: 1.5em;
}

.pillarbox-2,
.windowbox-2 {
    padding-inline: 2.25em;
}

.pillarbox-3,
.windowbox-3 {
    padding-inline: 3.375em;
}

.pillarbox-4,
.windowbox-4 {
    padding-inline: 5.0625em;
}

.shadowbox-1 {
    box-shadow: 0 0 1.5em #00000040;
}

.shadowbox-2 {
    box-shadow: 0 0 2.25em #00000040;
}

.shadowbox-3 {
    box-shadow: 0 0 3.375em #00000040;
}

.shadowbox-4 {
    box-shadow: 0 0 5.0625em #00000040;
}

.wrapper {
    margin-inline: auto;
    width: min(calc(100% - 3em), 60em);
}

@media (min-width: 60em) {
    .column {
        flex: 1;
    }

    .row {
        flex-flow: row;
    }
}