body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    margin: 0;
}

h1.title {
    display: none;
}

body > .primary-content {
    flex-grow: 1;
    padding: 0 var(--text-normal);
    padding-bottom: 2rem;

    /**
     * TODO What about a slowly panning background pattern with meal icons?
     */
    background: repeating-linear-gradient(
            45deg,
            rgba(240, 248, 255, 85%),
            rgba(240, 248, 255, 85%) .125rem,
            rgba(255, 255, 255, 85%) .125rem,
            rgba(255, 255, 255, 85%) .5rem),
    url("img/primary-background.svg.jpeg");
}

@media (max-width: 36em) {
    body.convenient-width > .primary-content {
        min-width: auto;
        width: 100%;
    }
}

.convenient-reading-width {
    max-width: 32rem;
}

.convenient-reading-width p {
    text-align: justify;
}