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

::before,
::after {
    text-decoration: inherit;
    vertical-align: inherit;
}

:where(html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video) {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
}

:where(:root) {
    cursor: default;
    line-height: 1.5;
    text-size-adjust: 100%;
    overflow-wrap: break-word;
    tab-size: 4;
    -webkit-tap-highlight-color: transparent;
}

:where(html) {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizespeed;
}

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

:where(body) {
    line-height: 1;
}

:where(ol, ul) {
    &[class] {
        list-style: none;
    }
}

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

:where(input, button, textarea, select) {
    font: inherit;
}

:where(blockquote, q) {
    quotes: none;

    &::before,
    &::after {
        content: "";
        content: none;
    }
}

:where(table) {
    border-spacing: 0;
    border-collapse: collapse;
}

:where(hr) {
    height: 0;
    color: inherit;
}

:where(pre) {
    overflow: auto;
    font-family: monospace, monospace;
    font-size: 1em;
}

:where(svg:not([fill])) {
    fill: currentcolor;
}

:where(button, [type="button" i], [type="reset" i], [type="submit" i]) {
    appearance: button;
}

:where(textarea) {
    resize: vertical;
    margin: 0;
}

:where([type="search" i]) {
    appearance: textfield;
    outline-offset: -2px;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto;
}

::input-placeholder {
    color: inherit;
    opacity: .54;
}

::-webkit-search-decoration {
    appearance: none;
}

::-webkit-file-upload-button {
    font: inherit;
    appearance: button;
}

:where(details > summary:first-of-type) {
    display: list-item;
}

:where([aria-busy="true" i]) {
    cursor: progress;
}

:where([aria-disabled="true" i], [disabled]) {
    cursor: not-allowed;
}

:where([aria-hidden="false" i][hidden]) {
    display: initial;
}

:where([aria-hidden="false" i][hidden]:not(:focus)) {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

:where(a:focus),
:where(input:focus),
:where(button:focus),
:where(select:focus),
:where(textarea:focus),
:where(div[tabindex]:focus) {
    opacity: 1;

//outline-offset: 3px;
//outline-style: dashed;
//outline-width: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
    //scroll-behavior: auto !important;
    //background-attachment: initial !important;
    //transition-delay: 0s !important;
    //transition-duration: 0s !important;
    //animation-duration: 1ms !important;
    //animation-delay: -1ms !important;
    //animation-iteration-count: 1 !important;
    }
}

@media (prefers-reduced-motion: no-preference) {
    *:focus {
    //transition: outline-offset .25s ease;
    }
}