@import url('https://fonts.googleapis.com/css2?family=Quicksand');

:root {
    /*
        Colors
    */
    --header-height: 3.5rem;
    --hue: 120;
    --first-color: hsla(var(--hue), 58%, 39%, 1);
    /*(var(--hue), 24%, 32%)*/
    --first-color-alt: hsl(var(--hue), 58%, 28%);
    --first-color-lighten: hsla(var(--hue), 64%, 95%, 1);
    --first-color-lighten-footer: hsla(var(--hue), 64%, 95%, 1);
    --title-color: hsl(var(--hue), 4%, 15%);
    --text-color: hsl(var(--hue), 4%, 35%);
    --text-color-light: hsl(var(--hue), 4%, 55%);
    --body-color: hsl(var(--hue), 0%, 100%);
    --container-color: #fff;
    --white: #FFF;
    --leaf: #104908;
    --milk: #F9FCF5;
    --Eggshell: #E6F2D8;
    --Gray: #EFEFEF;
    --Dandelion: #FFD972;
    --back-dandelion: #fff7e0;
    --Tea: #CFE7B4;
    --Rose: #D5001A;
    --back-rose: #ebd4d7;
    --text-color-admin: #2c2c2c;
    /*
        Fonts
    */
    --body-font:
        'Quicksand', sans-serif;
    --big-font-size: 2rem;
    --h1-font-size: 1.5rem;
    --h2-font-size: 1.25rem;
    --h3-font-size: 1rem;
    --normal-font-size: .938rem;
    --small-font-size: .813rem;
    --smaller-font-size: .75rem;
    /*
        Font Weight
    */
    --font-medium: 500;
    --font-semi-bold: 600;
    --font-bold: 700;
    /*  
        Margin Buttom
    */
    --mb-0-5: .5rem;
    --mb-0-75: .75rem;
    --mb-1: 1rem;
    --mb-1-5: 1.5rem;
    --mb-2: 2rem;
    --mb-2-5: 2.5rem;
    /*
        z-index
    */
    --z-tooltip: 10;
    --z-fixed: 100;
    /*
        Line Height
    */
    --line-height-1: 1.5rem;
    --line-height-2: 1.8rem;
    --line-height-3: 2.1rem;
}

@media screen and (min-width: 968px) {
    :root {
        --big-font-size: 3.5rem;
        --h1-font-size: 2.25rem;
        --h2-font-size: 1.5rem;
        --h3-font-size: 1.25rem;
        --normal-font-size: 1rem;
        --small-font-size: .875rem;
        --smaller-font-size: .813rem;
    }
}