:root {
    --header-start-height: 5.6rem;
    --header-shrink-height: 4rem;
    --header-height-difference: calc(var(--header-start-height) - var(--header-shrink-height));
    --header-arrow-height: 2rem;
    --total-header-height: calc(var(--header-start-height) + var(--header-arrow-height));
    --scroll-padding-top: var(--header-shrink-height);
}

html {
    font-size: 10px;
    scroll-padding-top: var(--scroll-padding-top);
}
[data-page] {
    scroll-margin-top: var(--total-header-height);
}

body {
    font-size: 2.2rem;
    font-family: var(--font-main);
    font-optical-sizing: auto;
}

html,
body {
    background: var(--background);
    scroll-behavior: smooth;
    width: 100vw;
    /* no scrollbar reflow */
    overflow-x: hidden;
    overflow-x: clip;
}

*,
*:after,
*:before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}