html {
    font-size: var(--font-size-html);
}

body {
    font-size: var(--font-size);
    line-height: var(--line-height-spacious);
    font-family: var(--font-sans);
    font-weight: 400;
    color: var(--c-text);
    background-color: var(--c-bg);
    height: 100vh;
    gap: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: center;
    transition: flex .4s linear, background-color .2s linear, color .2s linear;
}

.highlight,
::selection {
    color: var(--c-text);
    background-color: var(--c-highlight);
}

*:focus-visible {
    outline-offset: 2px;
    border-radius: var(--border-radius);
    outline: 3px solid var(--c-highlight)
}