<style is:global>
    @import url("../styles/archivo.css");
    @import url("../styles/clash-display.css");

    :root {
        --clr-ts-warm-red: hsl(3, 94%, 60%);
        --clr-ts-dark: hsl(7, 18%, 10%);
        --clr-ts-dark-logo: hsl(7, 18%, 13%);
        --clr-ts-light: hsl(349, 57%, 91%);

        --ff-heading: "Clash Display", sans-serif;
        --ff-body: "Archivo", sans-serif;

        --fs-xl: clamp(2.125rem, 5vw + 1rem, 6rem);
        --fs-600: clamp(1.125rem, 1.5vw + 0.5rem, 1.25rem);
        --fs-500: 1.125rem;
        --fs-400: 1rem;
        --fs-300: 0.75rem;
    }

    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: var(--ff-body);
        font-size: var(--fs-400);

        background-color: var(--clr-ts-dark);
        color: var(--clr-ts-light);
        -webkit-font-smoothing: antialiased;
    }

    .sr-only {
        position: absolute !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        width: 1px !important;
        height: 1px !important;
        margin: -1px !important;
        padding: 0 !important;
        border: 0 !important;
        clip: rect(1px 1px 1px 1px) !important;
        -webkit-clip-path: inset(50%) !important;
        clip-path: inset(50%) !important;
    }

    .content {
        max-width: 82ch;

        & > * + * {
            margin-top: 0.25em;
        }

        & a {
            display: inline-block;
            width: max-content;
            position: relative;
            font-weight: 500;
            color: var(--clr-ts-warm-red);
        }
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: var(--ff-heading);
    }

    h1 {
        max-width: 16ch;
        font-size: var(--fs-xl);
        font-weight: 700c;
        text-transform: uppercase;
        line-height: 1.1;
        letter-spacing: 0.0333em;
    }
</style>
