@import url('./archivo.css');
@import url('./clash-display.css');

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

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

    --fs-xl: clamp(3.75rem, 12vw + 1rem, 6rem);
    --fs-600: 1.5rem;
    --fs-500: 1.25rem;
    --fs-400: 1rem;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    background-color: var(--clr-ts-dark);
    color: var(--clr-ts-light);
    font-family: var(--ff-body);
    font-size: var(--fs-400);
}

h1 {
    font-family: var(--ff-heading);
    font-size: var(--fs-xl);
}