:root {
    /* Colors */
    --primary-color: #222222;
    --secondary-color: #f58220;
    --tertiary-color: #323031;
    --quaternary-color: #E2E2E2;
    --link-color: #f58220;
    --link-hover-color: #b83a26;
    --menu-hover-bg: #f58220;
    --menu-color: #323031;
    --menu-secondary-color: #E2E2E2;
    --menu-hover-color: #f58220;
    --body-bg: #F5F5F5;
    --body-secondary-bg: #e3e3e3;
    --primary-bg: #F5F5F5;
    --primary-bg-rgb: 255,255,255;
    --secondary-bg: #E2E2E2;
    --tertiary-bg: #ffffff85;
    --quaternary-bg: #f582204a;
    --header-primary-color: #f58220;
    --header-secondary-color: #323031;
    --green-color: #435738;
    --yellow-color: #f8da82;
    --blue-color: #2F80ED;
    --red-color: #b83a26;
    --border-color: #CCCCCC;

    /* Border */
    --radius-primary: min(3rem, 5vw);
    --radius-secondary: calc(var(--radius-primary) / 2);
    --radius-small: calc(var(--radius-primary) / 5);
    --border-width: 0.5rem;

    /* Font sizes */
    --font-primary: min(1.1rem, 1.2vw);
    --font-secondary: 12px;
    --font-small: 8px;
    --menu-link: 18px;
    --h1-size: min(8.5rem, calc(10.2vw - 7.5px));
    --h2-size: calc(var(--h1-size) / 2.2);
    --h3-size: min(3.5vw, 2.5rem);
    --h4-size: min(5vw, 2rem);
    --h5-size: min(1.25rem,1.64vw);
    --h6-size: 1rem;
    --front-header-size: min(10.5rem, calc(9.2vw - 7.5px));

    /* Fonts */
    --font-family-primary: 'Figtree', sans-serif;
    --font-family-secondary: 'Lexend Deca', sans-serif;
}
  


/*** MOBILES AND TABLETS ***/

@media (max-width: 900px) {
    :root {
        --h1-size: max(2.9rem, 13.4vw);
        --h3-size: min(2.5rem, 6vw);
        --h5-size: min(1rem,3.5vw);
        --front-header-size: 12.4vw;
        --font-primary: 1.05rem;
    }
}

@media (max-width: 450px) {
    :root {
        --font-primary: 0.9rem;
        --h2-size: calc(var(--h1-size) / 1.5);
    }
}

@media (max-width: 400px) {
    :root {
        --font-primary: 0.85rem;
    }
}