:root {
    /* font sizing */
    --size-fonts-base: 1rem;

    --text-xs: clamp(0.625rem, -0.8333vw + 1rem, 0.75rem);

    --text-sm: clamp(0.75rem, -0.417vw + 1rem, 0.875rem);

    --text-base: 1rem;

    --text-lg: clamp(1.125rem, 0.417vw + 1rem, 1.25rem);

    --text-xl: clamp(1.5rem, 0.875rem + 0.625vw, 1.625rem);

    --text-2xl: clamp(1.6rem, 0.825rem + 0.8750000000000001vw, 1.875rem);

    --text-3xl: clamp(1.7rem, 0.8rem + 1vw, 2rem);

    --text-4xl: clamp(1.8rem, 0.75rem + 1.25vw, 2.25rem);

    --h1-size: 30px;
    --h2-size: 24px;
    --h3-size: 20px;
    --h4-size: 18px;

    /* colors */
    --link-color: #54142E;

    --theme-white: #FFFFFF;
    --theme-black: #414141;
    --theme-brown: #54142E;
    --theme-dark-green: #003840;
    --theme-light-green: #8ACCCF;
    --theme-lighter-green: #C4E5E7;
    --theme-beige: #F5EDE0;
    --theme-yellow: #FFDB00;

    /* container maxwidths */
    --maxw-full: 100%;
    --maxw-xlarge: 1400px;
    --maxw-large: 1300px;
    --maxw-medium: 1020px;
    --maxw-small: 650px;

    /* blocks spacing */
    --spacing-default-x: 1rem;
    --spacing-default: 2rem;
    --spacing-small: 1rem;
    --spacing-medium: 2rem;
    --spacing-large: 3rem;
    --spacing-xlarge: 5rem;
    --spacing-mobile: calc(var(--spacing-default) * 0.75);

    /* fonts */
    --font-base-color: #414141;
    --font-white-color: #FFFFFF;
    --font-base: 'Roboto', sans-serif;
    --font-heading:  'Roboto', sans-serif;

    /* image mask */
    --image-mask-top-margin: -9rem;
    --image-mask-bottom-margin: -14rem;
    --image-mask-top-margin-mobile: -5.5rem;
    --image-mask-bottom-margin-mobile: -8rem;

}