:root {
    /* MAIN COLOURS */
    --color-main-light: #FCFAFC;
    /* title/body/background */
    --color-main-grey: #E0E0E0;
    /* background */
    --color-main-dark: #26221D;
    /* title/body/background */

    /* SUPPLEMENTARY COLOURS */
    --color-supp-cream: #F9F4EF;
    /* background */
    --color-supp-lavender: #B5AEB5;
    --color-supp-sage: #AFB2AD;
    /* subtitle */
    --color-supp-lime: #C4C56E;
    /* background */
    --color-supp-blue: #A5B7C7;
    --color-supp-wine: #77313D;
    --color-supp-olive: #6E6F4D;
    --color-supp-brown: #443C34;
    /* Font size scale (based on about.css) */
    --fs-label: 18pt; /* titles, small headings */
    --fs-lead: 24pt;  /* lead / large intro */
    --fs-body: 12pt;  /* body text */
    --fs-huge: 36pt;  /* large display titles (optional) */
    
    /* Spacing scale */
    --sp-xs: 4pt;     /* small accent spacing */
    --sp-sm: 6pt;     /* small padding */
    --sp-md: 12pt;    /* standard padding / margin */
    --sp-lg: 18pt;    /* large padding / margin */
    --sp-xl: 24pt;    /* extra large spacing */
    --sp-2xl: 36pt;   /* double large spacing */
    --sp-3xl: 48pt;   /* triple large spacing */
}

html {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

body {
    background-color: var(--color-main-light);
    margin: 0 0 20vh 0;
}

a {
    color: var(--color-main-dark);
    text-decoration: none;
}