@charset "UTF-8";

@import url(suport.css);
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');



* {
    padding: 0px;
    margin: 0px;
}



body{
    font-family: 'Jost';
    font-weight: 400;
    box-sizing: border-box;
    background-color: var(--cor001);
    overflow-x: hidden;
    color: var(--cor2);
    background-color: var(--cor4);

    & h1, h2, h3, h4, h5, h6 {
        font-family: 'Figtree';
    }

    & h1 {
    font-size: 2.3rem;
    }

    & h2 {
    font-size: 2.5rem;
    
    }
    & h3 {
        font-size: 1.5rem;
    }

    & p {
        font-size: 1.6rem;
        text-align: left;
        text-indent: 50px;
    }

}

header {
    
    
    background-color: var(--cor3);
    display: flex; /* Adicionado */
    flex-direction: column;
    align-items: flex-start; /* Alinha ao fundo */
    justify-content: flex-start; /* Alinha à esquerda */
    padding: 70px;
    padding-bottom: 25vh;

    & h1{
        color: var(--cor1);
        margin: 0;
        padding-top: 30px;
        font-size: 5rem;
        line-height: 1;
    }

    & h2 {
        color: rgb(214, 214, 214);
        margin: 0;
        font-size: 2rem;
        font-weight: 350;
        line-height: 1.2;
    }
}

main {
    background-color: var(--cor1);
    padding: 20px 0 20px 0;
    padding-bottom: 10vh;
    
    & p, h1, h2, h3, h4, h5, h6{
        margin: 30px 25vw;
    }
    & hr {
            width: 50%;
            margin: 0 auto 60px auto;
            align-self: stretch; /* faz o hr ocupar toda a largura no flexbox */
            border: 2px solid var(--cor3);
        }
}

.image-container {
    display: flex;
    flex-flow: row wrap;
    align-items: center; 
    justify-content: center;



& img {
    margin: 10px;
    transition: transform 0.3s, box-shadow 0.3s;
    max-width: 70%;
    display: block;
    transform: translateX(0px) translateY(0px);

    
}

& img:hover{
    box-shadow: 0 4px 5px 0 var(--cor3a);
    
    transform: translateY(+5px);
    }

}


main > footer {
    margin: auto;
    text-align: center;
    padding-top: 5vh;

    & div.container-flex{
        display: flex;
    }
    
    & a {
        margin: auto;
        display: block;
        text-align: center;
        text-decoration: none;
        color: black;
    }
    
    & h1 {
        outline: 4px solid black;
        margin: auto;
        padding: 15px;   
        display: block;
        border-radius: 40px;

        font-size: 3.2rem;
        

        transition: transform 0.3s, box-shadow 0.3s;

    }
}

main > footer > .container-flex > a > h1:hover{
    box-shadow: 0 4px 5px 0 var(--cor3a);;
    transform: translateY(+10px);
    color: var(--cor3);
    outline-color: var(--cor3);
}


@media screen and (max-width: 992px){
    header{
        
        padding-bottom: 8vh;


        & h1 {
        font-size: 3rem;
        padding-bottom: 20px;
        padding-top: 0px;
        max-width: 90%;
    }

}
    main > p {
        font-size: 1.4rem;
        text-align: left;
        text-indent: 50px;
    }

    main {
        & p, h1, h2, h3, h4, h5, h6{
        margin: 30px 20vw;
    }
}
}