:root{
    --lilas: #a9a1dd;
    --creme: #f2f1df;
    --azul: #0000fe;
}

@font-face {
    font-family: Pitanga-thin;
    src: url(../src/fonts/PitangaTest-Thin-BF65e68dfb0b844.ttf);
}

@font-face {
    font-family: Pitanga-light;
    src: url(../src/fonts/PitangaTest-Light-BF65e68dfabb5e7.ttf);
}

@font-face {
    font-family: Pitanga-regular;
    src: url(../src/fonts/PitangaTest-Regular-BF65e68dfb505e7.ttf);
}

@font-face {
    font-family: Pitanga-medium;
    src: url(../src/fonts/PitangaTest-Medium-BF65e68dfb493cf.ttf);
}

@font-face {
    font-family: Pitanga-bold;
    src: url(../src/fonts/PitangaTest-Bold-BF65e68df91c1c5.ttf);
}

@font-face {
    font-family: Pitanga-extra-bold;
    src: url(../src/fonts/PitangaTest-ExtraBold-BF65e68df9a0724.ttf);
}

/* width */
::-webkit-scrollbar {
    width: 10px;
  }

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--creme); 
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--azul); 
}

*{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

body{
    background-color: var(--lilas);
    font-family: "Pitanga-regular", sans-serif;
}

header{
    text-align: center;
    margin: 1rem 0;
}

header .logo{
    width: 20%;
}

main{
    width: 1366px;
    margin: 0 auto;
}

/* BANNER */
.wrapper-banner {
    padding: 2rem;
    text-align: center;
    position: relative;
}

.banner {
    width: 100%;
}

.alert-banner {
    position: absolute;
    bottom: -2%;
    left: 50%;
    transform: translateX(13%);
    display: flex;
    align-items: center;
    flex-direction: column;
    max-width: 100%;
}

.alert-banner .alert {
    width: 100%;
    max-width: 260px;
}

.wrapper-banner a {
    background-color: var(--creme);
    color: var(--lilas);
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    width: 85%;
    border-radius: 10px;
    font-family: "Pitanga-bold";
    font-size: 1.25rem;
    text-decoration: none;

    -webkit-box-shadow: 0px 3px 0px 0px rgba(199,199,199,1);
    -moz-box-shadow: 0px 3px 0px 0px rgba(199,199,199,1);
    box-shadow: 0px 3px 0px 0px rgba(199,199,199,1);
}

/* INFO */
.wrapper-info{
    display: flex;
    justify-items: center;
    align-items: flex-end;
    justify-content: center;
    margin-top: 5rem;
    gap: 2rem;
}

.wrapper-info img{
    width: 50%;
}


.wrapper-info p{
    font-size: 24px;
    text-align: justify;
    color: var(--azul);
    font-family: "Pitanga-medium";
    line-height: 1.8rem;
    word-spacing: 3px;
}

.wrapper-text-info{
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.wrapper-text-info span{
    font-family: "Pitanga-bold";
    font-style: italic;
}


/* INFO2 */
.wrapper-info2{
    display: flex;
    justify-items: center;
    align-items: flex-end;
    justify-content: center;
    margin-top: 5rem;
    gap: 2rem;
}

.wrapper-info2 img{
    width: 50%;
}


.wrapper-info2 p{
    font-size: 24px;
    text-align: justify;
    color: var(--azul);
    font-family: "Pitanga-medium";
    line-height: 1.8rem;
    word-spacing: 3px;
    width: 85%;
}

.wrapper-text-info{
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.wrapper-text-info span{
    font-family: "Pitanga-bold";
    font-style: italic;
}


/* TEXTO INFO */
.text-info{
    margin-top: 5rem;
    font-size: 8rem;
    color: var(--creme);
    font-family: "Pitanga-medium";
}


/* INFO3 */
.wrapper-info3{
    display: flex;
    justify-items: center;
    margin-top: 5rem;
    gap: 2rem;
    align-items: center;
}


.wrapper-info3 img {
    width: 50%;
    margin-bottom: 5rem;
}


.wrapper-info3 p{
    text-align: justify;
    color: var(--azul);
    line-height: 1.8rem;
    word-spacing: 3px;
    font-size: 1.2rem;
}

.wrapper-text-info3{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wrapper-text-info3 span{
    font-family: "Pitanga-bold";
    font-style: italic;
}

.subtitle1{
    font-family: "Pitanga-bold";
    color: var(--azul);
    margin-bottom: 1rem;
    font-size: 1.6rem;
}

.subtitle1 span{
    display: block;
    font-style: normal;
}

.text1{
    width: 60%;
    margin-bottom: 2rem;
}

.text2{
    width: 60%;
    margin-bottom: 2rem;
}

.button-text-info {
    background-color: var(--creme);
    color: var(--azul);
    border: none;
    padding: 0.8rem 1.5rem;
    margin: 2rem 0;
    cursor: pointer;
    max-width: 400px;
    width: 100%;
    border-radius: 15px;
    font-family: "Pitanga-bold";
    font-size: 1.25rem;
    text-decoration: none;

    -webkit-box-shadow: 5px 5px 0px 0px rgba(0,0,254,1);
    -moz-box-shadow: 5px 5px 0px 0px rgba(0,0,254,1);
    box-shadow: 5px 5px 0px 0px rgba(0,0,254,1);
}

.button-text-info span{
    display: block;
    font-style: normal;
    font-family: "Pitanga-bold";
}

.text3 span{
    display: block;
    font-style: normal;
    font-family: "Pitanga-regular";
}

.text4{
    margin-top: 2rem;
}


/* SINTOMAS */
.wrapper-symptoms{
    text-align: center;
    margin-top: 3rem;
}
.wrapper-symptoms img {
    width: 80%;
}

/* PREVENÇÃO */
.wrapper-prevention{
    margin-top: 5rem;
    text-align: center;
}

.wrapper-prevention img {
    width: 60%;
}


/* IMPORTANTE */
.wrapper-important{
    margin-top: 5rem;
    text-align: center;
}

.wrapper-important img {
    width: 60%;
}


/* FATORES DE RISCOS */
.wrapper-factors{
    margin-top: 5rem;
    text-align: center;
}

.wrapper-factors img {
    width: 100%;
    margin-bottom: -10px;
}

.title-videos {
    text-align: center;
    background-color: var(--azul);
}

.title-videos p{
    font-size:4rem;
    color: var(--lilas);
    font-family: "Pitanga-bold";
}

.title-videos iframe {
    border-radius: 15px;
    overflow: hidden;
}

.video-wrapper{
    text-align: center;
    background-color: var(--azul);
    padding: 3rem;
}

.video-wrapper iframe{
    border-radius: 15px;
    overflow: hidden;
    width: 60%;
    height: 600px;
}


  
/* SEÇÃO 2 */
.background-main2{
    background-color: var(--azul);
}

.main2{
    width: 1366px;
    margin: 0 auto;
    position: relative;
}

/* MEDICO */
.wrapper-medic{
    text-align: center;
}

.wrapper-medic img{
    width: 60%;
}

/* BUTTON FOLDER */
.wrapper-button-folder{
    text-align: center;
}

.button-folder {
    background-color: var(--lilas);
    color: var(--azul);
    font-family: "Pitanga-bold";
    display: inline-block;
    padding: 1rem 4rem;
    text-decoration: none;
    border-radius: 10px;
    font-size: 3rem;

    -webkit-box-shadow: 5px 5px 0px 0px rgba(149,140,209,1);
    -moz-box-shadow: 5px 5px 0px 0px rgba(149,140,209,1);
    box-shadow: 5px 5px 0px 0px rgba(149,140,209,1);

    margin-top: 4rem;
}

.button-folder span{
    display: block;
}


/* CAMISETA */
.wrapper-tshirt {
    margin-top: 5rem;
    text-align: center;
    position: relative;
    display: inline-block;

    margin-bottom: 5rem;
}

.wrapper-tshirt img {
    width: 50%;
}

.button-of-tshirt {
    display: flex;
    flex-direction: column;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(10%, 100%);
}

.button-of-tshirt p{
    background-color: var(--lilas);
    color: var(--azul);
    font-family: "Pitanga-bold";
    display: inline-block;
    padding: 1rem 2rem;
    text-decoration: none;
    border-radius: 10px;
    font-size: 3rem;
    box-shadow: 5px 5px 0px 0px rgba(149, 140, 209, 1);
}

.button-of-tshirt span {
    display: block;
}

.button-of-tshirt a{
    background-color: var(--creme);
    color: var(--lilas);
    border: none;
    padding: 0.5rem .125rem;
    cursor: pointer;
    width: 100%;
    border-radius: 10px;
    font-family: "Pitanga-bold";
    font-size: 1.5rem;
    text-decoration: none;

    -webkit-box-shadow: 0px 3px 0px 0px rgba(199,199,199,1);
    -moz-box-shadow: 0px 3px 0px 0px rgba(199,199,199,1);
    box-shadow: 0px 3px 0px 0px rgba(199,199,199,1);
}


/* FOOTER */
footer{
    text-align: center;
    background-color: var(--azul);
    padding: 2rem;
}

footer img{
    width: 400px;
}




/* RESPONSIVIDADE */
/* CELULAR */
@media (max-width: 480px) {
    header .logo {
        width: 50%;
    }

    main, .main2{
        width: auto;
        padding: 0 1.5rem;
    }

    .alert-banner .alert {
        width: 60%;
    }

    .wrapper-banner {
        padding: 0.5rem;
    }

    .wrapper-banner button {
        width: 50%;
        padding: 0.5rem 1rem;
        font-size: 1rem;
        border-radius: 10px;

        -webkit-box-shadow: 0px 2px 0px 0px rgba(199, 199, 199, 1);
        -moz-box-shadow: 0px 2px 0px 0px rgba(199, 199, 199, 1);
        box-shadow: 0px 2px 0px 0px rgba(199, 199, 199, 1);
    }

    .alert-banner {
        transform: none;
        bottom: 0;
        position: unset;
        justify-content: center;
        flex-direction: row;
    }

    .wrapper-info {
        margin-top: 2rem;
        gap: 3rem;
        flex-direction: column-reverse;
        align-items: center;
    }

    .wrapper-info p {
        font-size: 1rem;
        line-height: normal;
        word-spacing: 3px;
    }

    .wrapper-text-info {
        gap: 1rem;
    }


    .wrapper-info2 {
        margin-top: 3rem;
        gap: 3rem;
        flex-direction: column;
        align-items: center;
    }

    .wrapper-info2 p {
        font-size: 1rem;
        line-height: normal;
        word-spacing: 3px;
        width: auto;
    }

    .text-info {
        margin-top: 3rem;
        font-size: 3rem;
    }

    .wrapper-info3 {
        margin-top: 2rem;
        gap: 1rem;
        flex-direction: column;
        align-items: center;
    }

    .wrapper-info3 p {
        font-size: 1rem;
        line-height: normal;
        word-spacing: 3px;
        width: auto;
    }

    .wrapper-info3 img{
        display: none;
    }

    .wrapper-symptoms{
        margin-top: 2rem;
    }

    .wrapper-prevention{
        margin-top: 2rem;
    }

    .wrapper-factors{
        margin-top: 2rem;
    }

    .wrapper-important{
        margin-top: 2rem;
    }

    .button-text-info{
        width: auto;
        font-size: 1rem;
        margin: 1rem 0;
    }

    .wrapper-symptoms img, 
    .wrapper-prevention img,
    .wrapper-important img,
    .wrapper-medic img,
    .wrapper-tshirt img{
        width: 100%;
    }

    .title-videos p {
        font-size: 3rem;
    }

    .video-wrapper iframe {
        height: 200px;
        width: 100%;
    }

    .button-folder {
        padding: 1rem;
        font-size: 2rem;
    }

    .button-of-tshirt {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        position: unset;
        transform: none;
    }

    .button-of-tshirt p{
        padding: 0.5rem;
        font-size: 1rem;
        width: 100%;
    }

    .button-of-tshirt a{
        font-size: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    footer img {
        width: 100%;
    }
}

/* Dispositivos extra pequenos */
@media (min-width: 481px) and (max-width: 767px) {
    header .logo {
        width: 50%;
    }

    main, .main2{
        width: auto;
        padding: 0 1.5rem;
    }

    .alert-banner .alert {
        width: 50%;
    }

    .wrapper-banner {
        padding: 0.5rem;
    }

    .wrapper-banner button {
        width: 50%;
        padding: 1rem;
        font-size: 1rem;
        border-radius: 10px;

        -webkit-box-shadow: 0px 2px 0px 0px rgba(199, 199, 199, 1);
        -moz-box-shadow: 0px 2px 0px 0px rgba(199, 199, 199, 1);
        box-shadow: 0px 2px 0px 0px rgba(199, 199, 199, 1);
    }

    .alert-banner {
        transform: none;
        justify-content: center;
        bottom: 0;
        position: unset;
        flex-direction: row;
    }

    .wrapper-info {
        margin-top: 3rem;
        gap: 3rem;
        flex-direction: column-reverse;
        align-items: center;
    }

    .wrapper-info p {
        font-size: 1.25rem;
        line-height: normal;
        word-spacing: 3px;
    }

    .wrapper-text-info {
        gap: 1rem;
    }


    .wrapper-info2 {
        margin-top: 3rem;
        gap: 3rem;
        flex-direction: column;
        align-items: center;
    }

    .wrapper-info2 p {
        font-size: 1.25rem;
        line-height: normal;
        word-spacing: 3px;
        width: auto;
    }

    .text-info {
        margin-top: 3rem;
        font-size: 3rem;
    }

    .wrapper-info3 {
        margin-top: 3rem;
        gap: 3rem;
        flex-direction: column;
        align-items: center;
    }

    .wrapper-info3 p {
        font-size: 1.25rem;
        line-height: normal;
        word-spacing: 3px;
        width: auto;
    }

    .wrapper-info3 img{
        display: none;
    }

    .wrapper-symptoms{
        margin-top: 2rem;
    }

    .wrapper-prevention{
        margin-top: 2rem;
    }

    .wrapper-factors{
        margin-top: 2rem;
    }

    .wrapper-important{
        margin-top: 2rem;
    }

    .button-text-info{
        width: auto;
        font-size: 1.25rem;
        margin: 1rem 0;
    }

    .wrapper-symptoms img, 
    .wrapper-prevention img,
    .wrapper-important img,
    .wrapper-medic img,
    .wrapper-tshirt img{
        width: 100%;
    }

    .title-videos p {
        font-size: 3rem;
    }

    .video-wrapper iframe {
        height: 400px;
        width: 100%;
    }

    .button-folder {
        padding: 1rem;
        font-size: 2rem;
    }

    .button-of-tshirt {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        position: unset;
        transform: none;
    }

    .button-of-tshirt p{
        padding: 0.5rem;
        font-size: 1.25rem;
        width: 50%;
    }

    .button-of-tshirt a{
        font-size: 1.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    footer img {
        width: 50%;
    }
}

/* Pequenos tablets */
@media (min-width: 768px) and (max-width: 991px) {
    header .logo {
        width: 30%;
    }

    main, .main2{
        width: auto;
        padding: 0 1.5rem;
    }

    .alert-banner .alert {
        width: 50%;
    }

    .wrapper-banner {
        padding: 0.5rem;
    }

    .wrapper-banner button {
        width: 50%;
        padding: 1rem;
        font-size: 1rem;
        border-radius: 10px;

        -webkit-box-shadow: 0px 2px 0px 0px rgba(199, 199, 199, 1);
        -moz-box-shadow: 0px 2px 0px 0px rgba(199, 199, 199, 1);
        box-shadow: 0px 2px 0px 0px rgba(199, 199, 199, 1);
    }

    .alert-banner {
        transform: none;
        justify-content: center;
        bottom: 0;
        position: unset;
        flex-direction: row;
    }

    .wrapper-info {
        margin-top: 3rem;
        gap: 3rem;
        flex-direction: column-reverse;
        align-items: center;
    }

    .wrapper-info p {
        font-size: 1.25rem;
        line-height: normal;
        word-spacing: 3px;
    }

    .wrapper-text-info {
        gap: 1rem;
    }


    .wrapper-info2 {
        margin-top: 3rem;
        gap: 3rem;
        flex-direction: column;
        align-items: center;
    }

    .wrapper-info2 p {
        font-size: 1.25rem;
        line-height: normal;
        word-spacing: 3px;
        width: auto;
    }

    .text-info {
        margin-top: 3rem;
        font-size: 3rem;
    }

    .wrapper-info3 {
        margin-top: 3rem;
        gap: 3rem;
        flex-direction: column;
        align-items: center;
    }

    .wrapper-info3 p {
        font-size: 1.25rem;
        line-height: normal;
        word-spacing: 3px;
        width: auto;
    }

    .wrapper-info3 img{
        display: none;
    }

    .wrapper-symptoms{
        margin-top: 2rem;
    }

    .wrapper-prevention{
        margin-top: 2rem;
    }

    .wrapper-factors{
        margin-top: 2rem;
    }

    .wrapper-important{
        margin-top: 2rem;
    }

    .button-text-info{
        width: auto;
        font-size: 1.25rem;
        margin: 1rem 0;
    }

    .wrapper-symptoms img, 
    .wrapper-prevention img,
    .wrapper-important img,
    .wrapper-medic img,
    .wrapper-tshirt img{
        width: 100%;
    }

    .title-videos p {
        font-size: 3rem;
    }

    .video-wrapper iframe {
        height: 400px;
        width: 100%;
    }

    .button-folder {
        padding: 1rem;
        font-size: 2rem;
    }

    .button-of-tshirt {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        position: unset;
        transform: none;
    }

    .button-of-tshirt p{
        padding: 0.5rem;
        font-size: 1.25rem;
        width: 50%;
    }

    .button-of-tshirt a{
        font-size: 1.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    footer img {
        width: 50%;
    }
}

/* Tablets grandes / laptops */
@media (min-width: 992px) and (max-width: 1199px) {
    header .logo {
        width: 30%;
    }

    main, .main2{
        width: auto;
        padding: 0 1rem;
    }

    .alert-banner .alert {
        width: 50%;
    }

    .wrapper-banner {
        padding: 0.5rem;
    }

    .wrapper-banner button {
        width: auto;
        padding: 1rem 1rem;
    }

    .alert-banner {
        transform: none;
        justify-content: center;
        bottom: 0;
        position: unset;
        flex-direction: row;
    }

    .wrapper-info {
        margin-top: 3rem;
        gap: 1rem;
        flex-direction: column-reverse;
        align-items: center;
    }

    .wrapper-info p {
        font-size: 1.25rem;
        line-height: normal;
        word-spacing: 3px;
    }

    .wrapper-text-info {
        gap: 1rem;
    }


    .wrapper-info2 {
        margin-top: 3rem;
        gap: 1rem;
        flex-direction: column;
        align-items: center;
    }

    .wrapper-info2 p {
        font-size: 1.25rem;
        line-height: normal;
        word-spacing: 3px;
        width: auto;
    }

    .text-info {
        margin-top: 3rem;
        font-size: 3rem;
    }

    .wrapper-info3 {
        margin-top: 3rem;
        gap: 1rem;
        flex-direction: column;
        align-items: center;
    }

    .wrapper-info3 p {
        font-size: 1.25rem;
        line-height: normal;
        word-spacing: 3px;
        width: auto;
    }

    .button-text-info{
        width: auto;
        font-size: 1.25rem;
        margin: 1rem 0;
    }

    .title-videos p {
        font-size: 3rem;
    }

    .video-wrapper iframe {
        width: 100%;
    }

    .button-folder {
        padding: 1rem;
        font-size: 2rem;
    }

    .button-of-tshirt {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        position: unset;
        transform: none;
    }

    .button-of-tshirt p{
        padding: 0.5rem;
        font-size: 1.25rem;
        width: 50%;
    }

    .button-of-tshirt a{
        font-size: 1.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    footer img {
        width: 50%;
    }
}

/* Desktops */
@media (min-width: 1200px) and (max-width: 1919px) {
    main, .main2{
        max-width: 1366px;
        width: 100%;
    }

    .alert-banner {
        transform: translateX(10%);
    }

    .wrapper-info,
    .wrapper-info2,
    .wrapper-info3{
        padding: 1rem;
    }
}

/* Telas extra grandes */
@media (min-width: 1920px) {}