html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

/*
    The page sits a shade away from the cards and lists drawn on it, so they stand out from it in
    either theme. Bootstrap has no variable that does this, because the shade wanted is lighter
    than the body in the light theme and darker than it in the dark one.
*/
:root {
    --nh-page-bg: #f8f9fa;
}

[data-bs-theme="dark"] {
    --nh-page-bg: #1a1d20;
}

body {
    margin-bottom: 0;
    background-color: var(--nh-page-bg);
}