@charset "UTF-8";

:root{
    --cor01:#35C573;
    --cor02:#17F075;
    --cor03:#90e4b4;
    --cor04:#5bc287;
    --cor05:#439B69;
    --cor06:#437057;
    --cor07:#35463C;
    --cor08:#2C332F;
    --cor09: #ffffff;
    --c1:#004E64;
    --c2:#00A5CF;
    --c3:#9FFFCB; 
    --c4:#25A18E;  
    --c5:#7AE582; 
    --c6:#29BF12;

    --tem1:#D0FEF5;
    --tem2:#2B061E;
    --tem3:#022F40;
    --tem4:#EA9E8D;
} 


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

body{
    background-color:var(--c1) ;
}

#bloco>h1{
    margin-bottom:2px ;
    color:black;
    font-size: 22px;
}
#bloco p{
    margin-bottom: 5px;
}
#name{
    border: none;
    border-radius: 4px;
    padding: 4px;
    width: 30vw;
    height: 1.8vh;
    background-color: var(--c3);
    
}
#cadastro{
    border-radius: 15px;
    box-shadow: 3px 3px 3px 3px rgba(17, 90, 17, 0.322);
    padding: 6px;
    background-color: white ;
    width: 32vw;
    height: 5.6vh;
    padding: 2px;
    margin: 4vh auto ;
    
}

section#semibloco{
    width: 100vw;
    height: 100vh;
    background-color: rgba(17, 90, 17, 0.2);
    z-index: 2;
    left: 0px;
    top: 0px;
    position: fixed;
    backdrop-filter: blur(10px);
    grid-template-columns: repeat(1,1fr);
    display: grid;
}      

#bloco{
    margin: auto;
    display: grid;
    text-align: center;
    background-color: white;
    align-items: center;
    width: 60vw;
    height: 60vw;
    border-radius: 6px;
    padding: 2px;
}


#ftpic{
    margin:0px auto 10px auto;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    height:18vw;
    width: 56vw;
}

#site{
    z-index: 1;
    left: 0px;
    top: 0px;
    position: fixed;
}

header{
    padding: 3px;
    height: 23vh;
    width: 100vw;
    background-image: url("/midia/ftfundo.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}


header>section>div img{
    width: 15vw;
    border-radius: 100%;
}

section #ftheader{
    display:flex ;
    width: 100vw;
    justify-content: center;
    backdrop-filter: blur(1.5px);

}

header #title{
    margin: auto;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 9.4vw;
}


#perfil{
    margin: auto
}
#nome{
    text-align: center;
}


#areanome{
    width: 18.3vw;
    font-family:serif;
    background-color: white ;
    text-align: center;
}

#tem1{
    padding: 10px;
    background-color: var(--tem1);
    height: 33vh;
}


#tem2{
    padding: 10px;
    height: 92vh;
    background-color: var(--tem2);
}

#ftnav{
    background-image: url(/midia/folhinhafundo.jpg);
    background-size: cover;
    text-align: center;
    color:var(--c3);
}

#ftnav h1{
    backdrop-filter: blur(0.4px);
}

#ftnav p{
    display: inline-block;
    padding: 2px;
    margin: auto 2px;
    font-size: 16px;
}

#ftnav p:hover{
    backdrop-filter: blur(1.2px);
    border-radius: 7px;
    color: var(--cor06);
}

h2{
    text-align: center;
    color: var(--tem4);
}

section#teste01{
    width: 100vw;
    display: inline-block;
    margin: auto;

}

.tes01{
    padding: 1px;
    width: 32vw;
}

#n{
    padding-bottom: 13px;
}

#tripesus img{
    width: 40vw;
    height: 25vh;
    border-top-left-radius:10px ;
    border-bottom-left-radius:10px ;
}

#tripesus p{
    padding-top: 3px;
}


#social h3{
    color: var(--c2);
}

#social p{
    color: var(--c2);
}
#ambiental h3{
    color:rgba(255, 255, 255, 0.727);
}
#ambiental p{
    color:rgba(255, 255, 255, 0.789);
}

#economica h3{
    color:var(--c4);
}

#economica p{
    color:var(--c4);
}


#social,#ambiental,#economica{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    margin: 20px auto;
    width: 90vw;
    height: 25vh;
    border-radius: 10px;
    background-color: var(--tem3);
    box-shadow: 2px 2px 5px 1px var(--cor06);
}



footer{
    background-color: var(--c1);
    height: 12vh;
}
footer p {
    padding: 5px;
    display: inline-block;
}

footer nav>p:nth-child(1){
    font-weight: bolder;
}

a{
    text-decoration: none;
    color: white;
}

a:hover{
    text-decoration: underline;
}