@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
    /* cores */
    --primary-color: #282D32; /* Definindo cor --primary-color com a cor azul */
    --secondary-color: #367B99; /* Definindo cor --secondary-color com a cor azul claro */
    --tertiary-color: #FFC075;
    --button-color: #367B99; /* Definindo cor --button-color com a cor azul */    
    --hover-color:#636768;/*cor do fundo quando o ouse passa por cima de botões */
    --gray-color:#eee;
    --logo-color: #80c9ff; /* Definindo cor --logo-color com a cor azul claro */
    --white: #FFFFFF; /*cor do texto em fundos brancos */
    --white-color: #F0F0F0;
    --black: #000000;

    /* famílias das fontes */
    --font-tittle: 'Roboto', sans-serif; /* Definindo família das fontes de título */
    --font-body: 'Roboto', sans-serif; /* Definindo família das fontes do corpo */
   
    /* Espessura das fontes */
    --font-tittle-weight: 900; /* Definindo espessura das fontes de título (black) */
    --font-tittlesecundary-weight: 700; /* Definindo espessura das fontes de título secundário (bold) */
    --font-subtittle-weight: 600; /* Definindo espessura das fontes de subtítulo (semibold) */
    --font-body-weight: 500; /* Definindo espessura das fontes do corpo (medium) */
    --font-button-weight: 700; /* Definindo espessura das fontes de botão (bold) */

    /* Tamanho das fontes */
    --font-size-tittle-primary: 2.7rem; /* Definindo o tamanho das fontes de título */
    --font-size-tittle-secondary: 2.1rem; /* Definindo o tamanho das fontes de subtítulo */
    /*--font-size-tittle-tertiary: 36px;  Definindo o tamanho das fontes de subtítulo */
    --font-size-subtittle-primary: 1.6rem; /* Definindo o tamanho das fontes de subtítulo */
    /*--font-size-subtittle-secondary: 16px;  Definindo o tamanho das fontes de subtítulo */
   
    --font-size-body-big: 1.5rem; /* Definindo o tamanho das fontes do corpo */
    --font-size-body-medium: 0.8rem; /* Definindo o tamanho das fontes do corpo */
    --font-size-body-small: 0.7rem; /* Definindo o tamanho das fontes do corpo */
    --font-size-button-big: 1.5rem; /* Definindo o tamanho das fontes dos botões */
    /*--font-size-button-medium: 20px;  Definindo o tamanho das fontes dos botões */
}

h1 {
    font-family: var(--font-tittle);
    font-weight: var(--font-tittle-weight);
    font-size: var(--font-size-tittle-primary);
}

h2 {
    font-family: var(--font-tittle);
    font-weight: var(--font-tittle-weight);
    font-size: var(--font-size-tittle-secondary);
}

h3 {
    font-family: var(--font-tittle);
    font-weight: var(--font-tittle-weight);
    font-size: var(--font-size-subtittle-primary);
}

label, p, option, a, ul {
    font-family: var(--font-body);
    font-weight: var(--font-body-weight);
    font-size: var(--font-size-body-big);
}

input {
    font-family: var(--font-body);
    font-weight: var(--font-body-weight);
    font-size: var(--font-size-body-medium);
}

button {
    font-family: var(--font-body);
    font-weight: var(--font-button-weight);
    font-size: var(--font-size-button-big);
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}