html,
body {
    margin: 0;
    height: 100%;

    max-width: 960px;
    margin: auto;
    --title-top: 32px;
}

@media screen and (max-width: 600px) {
    body {
        width: calc(100vw - 32px);
        --footer-height: 48px;
    }

    .when-big {
        display: none;
    }

    .when-small {
        display: relative;
    }
}

@media screen and (min-width: 601px) {
    body {
        width: calc(100vw - 64px);
        --footer-height: 72px;
    }
    
    .when-big {
        display: relative;
    }
    
    .when-small {
        display: none;
    }
}

header {
    background: var(--header-bg);
}

#container {
    display: flex;
    /* displays flex-items (children) inline */
    flex-direction: column;
    /* stacks them vertically */
    height: 100%;
    /* needs to take the parents height, alternative: body {display: flex} */

}

main {
    flex: 1;
    /* takes the remaining height of the "container" div */
    overflow: auto;
    /* to scroll just the "main" div */
}

section {
    height: 100%;
    /* takes the visible area of the "main" div */
    overflow: auto;
    /* recommended */
    border-bottom: 1px solid;
    background: var(--content-bg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-color: var(--content-bg-color);
}

section:last-child {
    border: none
}

footer {
    background: var(--footer-bg);
    height: var(--footer-height);
}