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



:root {
    /* CSS HSL */
    /* https://coolors.co/ */

    /*  --primaria: hsla(210, 67%, 43%, 1);
      --background: hsla(108, 22%, 87%, 1);
      --secundaria: hsla(34, 100%, 50%, 1);
      --destaque: hsla(355, 78%, 56%, 1);
      --detalhe: hsla(9, 63%, 45%, 1);
    */

    --background1: #FFFFFF;
    --background2: #003560;
    --background3: #9CB1C3;
    --background4: #F5F7F9;
    --primaria: #022747;
    --secundaria: #FFFFFF;
    --destaque: #9CB1C3;
    --detalhe: #79819C;
    --sombra: #4F6F92;
}

/* borda vermelha em todos os elementos para debug */
/** {
  outline: red solid 1px;
}*/

body {
    font-family: "PT Sans", sans-serif;
    background-color: var(--background1);
    color: var(--primaria);
    max-width: 1440px;
    margin: 0 auto;
    /*padding: 0 2rem;*/
    overflow-x: hidden;
}

@media (min-width: 768px) {
    body {
        padding: 0 4rem;
    }
}

@media (max-width: 768px) {
    padding: 0 2px;

    body{
        padding: 0 0;
    }

    #root{
        overflow: hidden;
    }

}

a {
    font-family: "PT Sans", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

section {
    padding: 5rem 0;

    @media (max-width: 768px) {
        padding: 2rem;
    }
}