/*========= VARIABLES CSS ============*/

:root {
    --header-height: 3rem;

    /*========== Colors =============*/
    --hue-color:209;
    --hue-color2: 357;
    --hue-percent: 83%;
    --black-color: hsl(var(--hue-color), 0%, 0%);
    --black-color-alt: hsl(var(--hue-color), 0%, 2%);
    --title-color: hsl(var(--hue-color2), 68%, 55%);
    --text-color: hsl(var(--hue-color), 0%, 82%);
    --text-color-light: hsl(var(--hue-color), 0%, 96%);
    --white-color: #fff;
    --body-color: hsl(var(--hue-color), var(--hue-percent), 5%);
    --container-color: hsl(var(--hue-color), var(--hue-percent), 11%);
    --content-color: hsl(var(--hue-color), var(--hue-percent), 16%);
    --text-gradient: linear-gradient(hsl(var(--hue-color), 4%, 24%), hsl(var(--hue-color), 4%, 65%));
    --scroll-thumb-color: hsl(var(--hue-color), 4%, 16%) ;
    --scroll-thumb-color-alt: hsl(var(--hue-color), 4%, 20%);

    /*========== Font and Typography =============*/
    --body-font: 'Roboto', sans-serif;
    --biggest-font-size: 5rem;
    --bigger-font-size: 3.5rem;
    --big-font-size: 2.5rem;
    --h2-font-size: 1.25rem;
    --h3-font-size: 1.125rem;
    --normal-font-size: 0.938;
    --small-font-size: 0.813rem;
    --smaller-font-size: 0.75rem;
    --text-line-height: 0.2rem;

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

    /*========== Responsive Fonts =============*/
    @media screen and (min-width: 968px) {
    :root {
        --biggest-font-size: 7.5rem;
        --bigger-font-size: 4.5rem;
        --big-font-size: 4rem;
        --h2-font-size: 1.5rem;
        --h3-font-size: 1.25rem;
        --normal-font-size: 1rem;
        --small-font-size: 0.875rem;
        --smaller-font-size: 0.813rem;
    }
}

/*========== BASE =============*/


html {
    scroll-behavior: smooth;
}
body {
 
    font-family: var(--body-font);
   
    background-color: var(--body-color);

}

h1,h2,h3{
    color: var(--title-color);

}



button,
input{
    border: none;
    outline: none;
}

button{
    cursor: pointer;
}

img {
    max-width: 100%;
    height: auto;
    margin-bottom: var(--mb-2);
    margin-top: var(--mb-1-5);
}

/*========== RESUABLE CSS CLASSES =============*/
.section{
}
.section_title{
    font-size: var(--bigger-font-size);
    text-align: center;
    margin-bottom: var(--mb-2-5);
}

.section_title-gradient{
    background: var(--text-gradient);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;

}
/*========== LAYOUT =============*/
.main{


}