*{box-sizing: border-box; margin:0; padding:0;}
@font-face{font-family: 'generic'; src: url('/assets/fonts/Generic-G20-FR-Classic-DEMO.woff2') format('woff2');}
@font-face{font-family: 'goodkitty'; src: url('/assets/fonts/goodkitty.woff2') format('woff2');}
:root{
    /*color palette*/
    --black: #262A2B;
    --off-white: #CFCFC5;
    --arctic-blue: #A2BFC3;
    --moonlight-yellow: #F8F88E;
    /*typography*/
    --title-font: 'generic', sans-serif;
    --highlight-font: 'goodkitty', sans-serif;
    --text-font: 'poppins', sans-serif;
        /*size*/
        --text-sm:   0.875rem;
        --text-base: 1rem;
        --text-lg:   1.25rem;
        --text-xl:   clamp(1.5rem, 1.2rem + 1.5vw, 2rem);    
        --text-2xl:  clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
        --text-hero: clamp(3rem, 2rem + 5vw, 7rem);
    /*spacing*/
    --space-1:  0.5rem;   /*  8px */
    --space-2:  1rem;     /* 16px */
    --space-3:  1.5rem;   /* 24px */
    --space-4:  2rem;     /* 32px */
    --space-6:  3rem;     /* 48px */
    --space-8:  4rem;     /* 64px */
    --space-12: 6rem;     /* 96px */   
}
body{
    background-color: var(--black);
    display: flex;
    flex-direction: column;
    align-items: center;
}