:root {

    /* colors */

    /* CSS HEX */

    /* CSS HSL */
    --night: hsla(280, 7%, 8%, 1);
    --dark-purple: hsla(326, 95%, 7%, 1);
    --cool-gray: hsla(240, 7%, 56%, 1);
    --antiflash-white: hsla(240, 7%, 92%, 1);
    --xanthous: hsla(37, 100%, 64%, 1);

    --black: var(--night);
    --dark: var(--dark-purple);
    --gray: var(--cool-gray);
    --white: var(--antiflash-white);
    --yellow: var(--xanthous);



    --black2:  hsla(280, 7%, 12%, 1);

    /* font families */

    --ff-sans: 'Lato', Helvetica, Arial, sans-serif;
    --ff-serif: Times, serif;

    
    /* https://screenspan.net/fallback */

    /* font sizes: */

    --fs-small2: 0.75rem;
    --fs-small: 0.833rem;
    --fs-p: 0.91rem;
    --fs-p2: 1rem;
    --fs-p3: 1.1rem;
    --fs-h3: 1.22rem;
    --fs-h2: 1.48rem;
    --fs-h1: 1.97rem;

    --fw-ultralight: 100;
    --fw-light: 300;
    --fw-normal: 400;
    --fw-bold: 700;
    --fw-extrabold: 900;

    /*   1320px =  82.5 rem    */ 

    /* some clamps */
    --fc-small2: clamp(0.7rem, -0.45vw + 0.79rem, 0.42rem);
    --fc-small: clamp(0.79rem, -0.36vw + 0.86rem, 0.56rem);
    --fc-p: clamp(0.89rem, -0.22vw + 0.93rem, 0.75rem);
    --fc-p2: clamp(1rem, 0vw + 1rem, 1rem);
    --fc-h3: clamp(1.13rem, 0.33vw + 1.06rem, 1.33rem);
    --fc-h2: clamp(1.27rem, 0.82vw + 1.1rem, 1.78rem);
    --fc-h1: clamp(1.42rem, 1.51vw + 1.12rem, 2.37rem);
    --fc-h1plus: clamp(1.6rem, 2.49vw + 1.1rem, 3.16rem);

    /* margins */
    --margin-xxs: 0.125rem;
    --margin-xs: 0.25rem;
    --margin-s: 0.5rem;
    --margin-m: 1rem;
    --margin-l: 1.25rem;
    --margin-xl: 2.5rem;
    --margin-xxl: 3.75rem;

    /* some margin clamps */


    --mc-l: clamp(0.5rem, calc(0.5rem + ((1vw - 0.2rem) * 1.875)), 1.25rem);
    --mc-xl: clamp(var(--margin-s), calc(0.5rem + ((1vw - 0.2rem) * 5)), (var(--margin-xl)));

    /* border radius */

    --br-s: 8px;
    --br-m: 12px;

    /* border-width */

    --bw-s: 1px;
    --bw-m: 2px;
    --bw-l: 3px;
    --bw-xl: 4px;


}