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

    background-color: var(--bg);
    color: var(--fg);
    scrollbar-color: var(--palette10) var(--bg-m3);

    font-size-adjust: ex-height 0.5;
    -webkit-text-size-adjust: 100%;
}

header {
    height: var(--header-height);
    width: 100%;
    background-color: var(--palette10);
}

content {
    margin: auto;
    max-width: var(--content-max-width);
    height: var(--content-height);

    display: flex;
    flex-direction: column;
    align-content: space-between;
    justify-content: space-between;
}

@media only screen and (max-width: 320px) {
    content {
        padding: 0 1em;
        font-size: larger;
    }
}

@media only screen and (max-width: 800px) and (min-width: 321px) {
    content {
        padding: 0 2em;
    }
}