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

    html {
        color-scheme: light dark;
        -webkit-font-smoothing: antialiased;
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
        hanging-punctuation: first allow-end last;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        text-wrap: balance;
    }

    p {
        text-wrap: pretty;
    }


    ul,
    ol,
    dl {
        list-style-position: inside;

        ul,
        ol,
        dl {
            padding-inline-start: 1lh;
        }
    }

    @media (prefers-reduced-motion: no-preference) {
        html {
            interpolate-size: allow-keywords;
        }
    }

    :where(div, article, header, footer) {
        /* ...and other block elements */
        display: flex;
        flex-direction: column;
    }




}