@layer reset {
    html {
        box-sizing: border-box;
        margin: 0;
    }

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

    body {
        font-family: sans-serif;
        margin: 0;
        -webkit-hyphens: auto;
        hyphens: auto;
        -webkit-font-smoothing: antialiased;
    }

    code, var, kbd, samp, tt, dir,
    abbr, acronym, code, h1, h2, h3 {
        -webkit-hyphens: none;
        hyphens: none;
    }

    h1, h2, h3, h4 {
        text-rendering: optimizeLegibility;
        text-wrap: balance;
        letter-spacing: clamp(
                -0.05em,
                calc((1em - 1rem) / -10),
                0em
        );
    }
    p {
        text-wrap: pretty;
    }
}

@layer fonts {
    @font-face {
        font-family: BigshotOne;
        src: url("/assets/fonts/Bigshot_One/BigshotOne-Regular.woff2") format("woff2-variations");
        font-weight: 100 900;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: Moderustic;
        src: url("/assets/fonts/Moderustic/Moderustic-VariableFont_wght.woff2") format("woff2-variations");
        font-weight: 100 900;
        font-style: normal;
        font-display: swap;
    }
}

@layer style {
    body {
        color: #252541;
        background-color: mintcream;
        font-family: Moderustic, sans-serif;
        font-size: 1.5rem;
    }

    h1, h2, h3, h4 {
        font-family: BigshotOne, sans-serif;
    }

    header {
        display: grid;
        place-items: center;
        margin: 40px 0 0 40px;
        padding-right: 8vw;
        width: 80%;
        height: 10vw;
        background-color: #f4f454;
        box-shadow: 6vw 2vw 0 0 #ee90dc;

        & > h1 {
            margin: 0;
            font-size: 8vw;
        }
    }

    p {
        margin: 3rem 0;
    }

    h2 {
        width: fit-content;
        margin: 2rem 0;
        padding: 8px 50px 8px 30px;
        background-color: #00ffb0;
        box-shadow: 40px 12px 0 0 #cb90ee;
        font-size: 3rem;
    }

    main {
        padding: 2rem;
    }

    .box {
        min-height: 300px;
        padding: 2rem;
        background-color: #c4fffb;
    }
}