@charset "utf-8";



@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Josefin+Sans:ital,wght@1,300&display=swap');

@font-face {
    font-family:'robo';
    src: url(../fontes/upheavtt.ttf)format('truetype');
    font-size:normal;
    
}

:root {
    
    --cor01:#83e1ad;

    --cor02:#3ddc84;
    --cor03:#2fa866;
    --cor04:#1a5c37;
    --cor05:#063d1e;
    
    --fonte-robo:'robo',sans-serif;
    --fonte-principal:'josefin sans';
   
    --fonte-corpo:Arial, Helvetica, sans-serif;

}

*{

margin: 0px;
padding: 0px;

}


header{
   background-image: linear-gradient(to bottom,var(--cor02),var(--cor04));
    padding-bottom: 42px;
    padding-top: 47px;
width: 100%;


}

header h1{
text-align: center;
font-family: var(--fonte-robo);
color:white;
font-weight: normal;
padding-bottom: 26px;
text-shadow: 2px 2px 7px rgba(0, 0, 0, 0.787);

}

header p{

text-align: center;
font-family: Arial, Helvetica, sans-serif;
text-shadow: 2px 1px 5px rgb(0, 0, 0);
color:white;


}

nav{

background-color: var(--cor04);

padding-bottom: 15px;
}

nav > a{

color: white;
padding: 6px;
text-decoration: none;
font-family: var(--fonte-principal);
font-weight: normal;
font-size: large;



}

nav > a:hover{

background-color: var(--cor03);
border-radius: 10px;
transition-duration: 0.5s;
color:black;


}


body{
    
    background-color:rgb(188, 147, 93);




}




main{
    max-width: 800px;
    min-width: 140px;
    padding: 15px;
    margin: auto;
    border-radius: 15px;
    background-color:white;

}

main h2{
background-image: linear-gradient(to right,var(--cor02),white);
padding-bottom: 7px;
padding-top: 7px;
padding-left: 7px;
border-radius: 7px;
font-family: var(--fonte-principal);
color: var(--cor04);
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.842);



}

main p{
font-family: var(--fonte-corpo);
text-indent: 30px;
text-align: justify;
font-size: 20px;
line-height: 45px;
margin: auto;
padding-top: 15px;
padding-bottom: 25px;



}

main img{

width:100%;


}

 #video-iframe{

    padding-top: 0px;
    padding-bottom: 0px;
}


.pequena{

display: block;
margin: auto;
height: 200px;
width: 300px;
padding-bottom: 15px;
padding-top: 24px;
}




.video-youtube{
position: relative;

margin: 0px -15px 15px -15px;
padding-bottom: 59%;
background-color:rgb(188, 147, 93);


}

.video-youtube > iframe{

position: absolute;

top: 5%;
left: 5%;
width: 90%;
height: 90%;
border-radius: 15px;


}

aside{
margin-top: 25px;
padding: 15px ; 
background-color: var(--cor04);
border-radius: 15px;
}


aside h3{

background-image: linear-gradient(to right, var(--cor03),var(--cor02));
    margin: -15px -15px 0px -15px;

border-radius: 15px 15px  0px 0px;
font-family: var(--fonte-principal);
background-color:var(--cor03);
padding-left: 30px;
    padding-top: 13px;
    padding-bottom: 8px;

}


aside p{

font-family: var(--fonte-corpo);
color: white;
text-align: justify;



}


aside ul{
font-weight: bold;
font-family: var(--fonte-principal);
list-style-position: inside;
columns: 2;
list-style-type: '\2714\0020\0020';
color: var(--cor03);
text-shadow: 1px 2px 2px black;
font-size: large;
}

aside ul abbr{

text-decoration: none;

}

aside ul abbr:hover{

color: red;
text-decoration: underline;
text-shadow: 1px 2px 2px black;

}

aside  a{

text-decoration: none;
color:var(--cor02);
text-shadow: 1px 2px 2px black;
}



aside a:hover{

text-decoration: underline;
color: blue;
text-shadow: 2px 1px 2px black;



}

footer{

background-color: white;
padding: 30px 0px;
margin: 40px 0px 0px 0px;

background-color: white;
}

footer p{
width: 100%;
text-align: center;
font-family: var(--fonte-robo);
font-size:large;
font-weight: normal;
color: var(--cor04);
text-shadow: 1px 1px 2px rgb(0, 0, 0);
}

footer a{

text-decoration: none;

color: rgb(30, 30, 255);
}

footer a:hover{

text-decoration: underline;
color: rgb(201, 0, 0);


}