@layer reset {
    :where(*, *::before, *::after) {
        box-sizing: border-box;
    }

    :where(img, picture, video, canvas, svg) {
        display: block;
        max-width: 100%;
        height: auto;
    }

    :where(button, input, select, textarea) {
        font: inherit;
        color: inherit;
        background-color: transparent;
        border: none;
        outline: none;
    }

    :where(article, aside, details, figcaption, figure,
        footer, header, hgroup, main, menu, nav, section, summary) {
        display: block;
    }

    :where(ul, ol) {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    :where(h1, h2, h3, h4, h5, h6) {
        margin: 0;
    }

    :where(sup, sub) {
        position: relative;
        vertical-align: baseline;
    }

    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    @media (prefers-reduced-motion: reduce) {

        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }
}