/*=============== GOOGLE FONTS ===============*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;900&display=swap');

/*=============== VARIABLES CSS ===============*/
:root{
    --header-height: 3.5rem;

    /*========== Colors ==========*/
    --hue: 14;

    --first-color: hsl(var(--hue), 91%, 54%);
    --first-color-alt: hsl(var(--hue), 91%, 50%);
    --title-color: hsl(var(--hue), 4%, 100%);
    --text-color: hsl(var(--hue), 4%, 85%);
    --text-color-light: hsl(var(--hue), 4%, 55%);

    /* Green gradient */
    --body-color: linear-gradient(90deg, hsl(104, 28%, 40%) 0%, hsl(58, 28%, 40%) 100%);
    --container-color: linear-gradient(136deg, hsl(104, 28%, 35%) 0%, hsl(58, 28%, 35%) 100%);

    /* Red gradient */
    // --body-color: linear-gradient(90deg, hsl(360, 28%, 40%) 0%, hsl(18, 28%, 40%) 100%);
    // --container-color: linear-gradient(136deg, hsl(360, 28%, 35%) 0%, hsl(18, 28%, 35%) 100%);

    /* Black solid */
    // --body-color: hsl(30, 8%, 8%);
    // --container-color: hsl(30, 8%, 10%);

    /*========== Font and typography ==========*/
    --body-font: 'Poppins', sans-serif;

    --biggest-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;

    // Responsive typography
    @media screen and (min-width: 992px){
        --biggest-font-size: 4rem;
        --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;
    }

    /*========== Font weight ==========*/
    --font-medium: 500;
    --font-semi-bold: 600;
    --font-black: 900;

    /*========== Margenes Bottom ==========*/
    --mb-0-25: .25rem;
    --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;
}