/********************************
 *                              *
 *            Reset             *
 *                              *
 *******************************/
/* #region Reset */
/* adapted from https://www.joshwcomeau.com/css/custom-css-reset/?from=newsletter*/
@layer reset {

    /* 1. Use a more-intuitive box-sizing model */
    :where(*),
    :where(*)::after,
    :where(*)::before {
        box-sizing: border-box;
        transition:
            /* color 0.2s ease-in-out,
        background-color 0.2s ease-in-out,
        background 0.2s ease-in-out,
        border-color 0.2s ease-in-out,
        stroke 0.2s ease-in-out,
        transform 0.2s ease-in-out,
        fill 0.2s ease-in-out, */
            all var(--transition-time, 0.2s) ease-in-out;

        /* 7. Inherit fonts for example form controls */
        font: inherit;
        scroll-behavior: smooth;
    }

    :where(*) {
        /* 2. Remove default margin adds inheritance */
        margin: 0;
        padding: 0;
        color: inherit;
    }

    :where(ol,
        ul,
        li) {
        list-style: none;
    }

    :where(:focus-visible) {
        outline: none;
        outline: 0.15rem solid rgb(from var(--accent) r g b / 0.5);
    }

    /* 3. Enable keyword animations */
    @media (prefers-reduced-motion: no-preference) {
        :where(html) {
            interpolate-size: allow-keywords;
        }
    }

    :where(body) {
        /* 4. Add accessible line-height */
        line-height: 1.5;
        /* 5. Improve text rendering */
        -webkit-font-smoothing: antialiased;
        min-height: 100dvh;
        color: var(--fg);
        background-color: var(--bg);
        display: flex;
        flex-direction: column;
    }

    /* 6. Improve media defaults */
    :where(img,
        picture,
        video,
        canvas,
        svg) {
        display: block;
        max-width: 100%;
    }

    :where(img) {
        object-fit: cover;
    }

    :where(button) {
        border: none;
    }

    /* 8. Avoid text overflows */
    :where(a,
        p,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6) {
        overflow-wrap: break-word;
        text-decoration: none;
    }

    /* 9. Improve line wrapping */
    :where(a,
        p) {
        text-wrap: pretty;
    }

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

    :where(select) {
        background-color: transparent;
        border: none;
        outline: none;
        color: var(--fg);
        cursor: pointer;
        font-size: 1rem;
    }

    :where(option) {
        outline: none;
        border: none;
        background-color: var(--bg);
        color: var(--fg);
    }

    /*
  10. Create a root stacking context
*/
    :where(#root,
        #__next) {
        isolation: isolate;
    }
}