@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

@font-face{
    font-family: 'Android';
    src:url(fonte/idroid.otf)
}

:root{
    --cor01:#C5EBD6;
    --cor02:#83E1AD;
    --cor03:#3DDC84;
    --cor04:#2FA866;
    --cor05:#063D1E;
    --fonte-padrao: arial,helvetica,sans-serif;
    --fonte-destaque:'Bebas Neue',cursive;
    --fonte-android:'Android',sans-serif;
}
*{
    margin: 0;
    padding:0;
}
body{
    background-color: var(--cor01);
    font-family: var(--fonte-padrao);
}
header{
  background-image: linear-gradient(to bottom, var(--cor04), var(--cor05));
    min-height: 150px;
    text-align: center;
    padding-top: 25px;
}
header h1{
    font-family: var(--fonte-destaque);
    color: white;
    font-size: 3em;
    text-shadow: 3px 2px 3px black;
}
header p{
    color: white;
    font-size: 1.1em;
    font-weight: bold;



}
main{
    background-color: white;
    padding: 20px;
    margin: auto;
    min-width: 300px;
    max-width: 1000px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-bottom: 30px;
    box-shadow: 3px 4px 3px rgba(0, 0, 0, 0.43);

}
main h1{
    font-family: var(--fonte-android);
    color: var(--cor05);
    
}
main p{
     text-indent: 30px;
     margin: 10px;
     text-align: justify;
     font-size: 1.1em;
     line-height: 30px;
}
main img{
    width: 100%;
}
main img.pequena{
    max-width: 400px;
    margin: auto;
    display: block;
}
main h2{
    background-image: linear-gradient(to right,var(--cor03), transparent);
    font-family: var(--fonte-android);
    color: var(--cor05);
}
nav{
    background-color: var(--cor05);
    padding: 10px;
}
nav > a{
   color: white;
   text-decoration: none;
   font-weight: bold;
   padding: 10px;
   border-radius: 5px;
   transition-duration: 0.5s;
}
a:hover{
    background-color: #3DDC84;
    color: var(--cor05);
}
aside{
    background-color: var(--cor02);
    border-radius: 10px;
    padding: 10px;
}
aside >h3{
    background-color: var(--cor05);
    color: white;
    margin: -10px -10px 0px -10px;
    padding: 5px;
    border-radius: 10px 10px 0px 0px;
}
aside > ul{
    list-style-position: inside;
    columns:2;
    list-style-type: '\2714\00A0';
}
div.video{
    background-color: var(--cor05);
    margin: 0px -20px 30px -20px;
    padding: 20px;
    padding-bottom: 59%;
    position: relative;
}
div.video > iframe{
    position: absolute;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
}
a.externo{
    text-decoration: none;
    color: var(--cor05);
    background-color: var(--cor02);

}
a.externo:hover{
    background-color: var(--cor03);
    text-decoration: underline;
}
a.externo::after{
    content:'\00A0\1F517';
}
footer{
    color: white;
    background-color: #063D1E;
    padding: 5px;
    text-align: center;
    font-size: 0.9em;
}
footer a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}
footer a:hover{
    text-decoration: underline;
    background-color: var(--cor01)
}