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

@font-face 
    {font-family: 'idroid';
    src: url('/fontes/idroid.otf') format('opentype'),url('/fontes/idroid.ttf') format('truetype');
    font-weight: normal;}


/* variável no css */
:root{
 --cor0:#c8e5d5;
 --cor1:#a3f0c6ed;
 --cor2:#3DDC84;
 --cor3:#2FA866;
 --cor4:#063D1E;
--font-padrao:arial, Verdana, Helvetica, Sans-serif;
--fonte-destaque:'Bebas Neue','cursive';
--font-idroid:'idroid',"arial bold"}

/* configuração global do meu site para todos os elementos(caixas) */
*{margin:0px;
 padding:0px}

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

.linkexterno::after{
    content:"\00A0🔗";}

header{
background-image:linear-gradient(to bottom,var(--cor2),var(--cor4));
min-height: 150px;
text-align: center;
padding-top: 40px;}

    header>h1{color:white;
    font-family: var(--fonte-destaque);
    font-size: 3em;
    font-weight: normal;
    margin-bottom: 20px;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.275);}

    header>p{color: white;
    font-family: var(--font-padrao);
    font-size: 1em;
    margin: auto;
    max-width: 600px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 35px;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.275);}

    article>h1{
        color:var(--cor4);
        font-family:var(--font-idroid);
        font-weight: bolder;}

    article>h2{color:var(--cor4);
    font-family: var(--font-idroid);
    font-weight: bolder;
    background-image: linear-gradient(to right,var(--cor1), rgba(255, 255, 255, 0.728));
    text-indent: 6px;}

nav{background-color: var(--cor4);
   padding: 10px;
   font-family: var(--font-padrao);}

    nav>a{color:white; 
    padding:10px;
    text-decoration: none;}

    nav>a:hover{
        background-color: var(--cor3);
        color: var(--cor4);
        font-weight: bolder;
        border-radius: 5px;
        transition-duration: 0.5s;}

main{background-color:white;
min-width: 300px;
max-width:1000px;
margin:auto;
padding: 20px;
box-shadow:0px 0px 10px hsla(0, 0%, 0%, 0.41);
border-bottom-left-radius:10px ;
border-bottom-right-radius:10px ;}

    main p{
    margin: 15px 0px;
    text-align: justify;
    text-indent: 30px;
    line-height: 1.5em;
    font-size: 1em;
    font-family: var(--font-padrao);}

    main strong{color:var(--cor4);
    font-style: italic;}
    
    main a{text-decoration: none;
    font-weight: bold;
    color:#042412;
    background-color: var(--cor1);
    padding:3px ;}

    main a:hover{text-decoration: underline;
    background-color: var(--cor1);}

    main img{
    width: 100%;}

    main img.pequena{
    max-width: 350px;
    display: block;
    margin:auto;}

    .video{
        background-color: var(--cor4);
        margin: 0px -20px 30px -20px;
        padding: 5px;
        padding-bottom: 50%;
        position: relative;}

    div.video>iframe{
        position: absolute;
        top:5%;
        left: 7.5%;
        width: 85%;
        height:85%;}


aside{
    background-color:var(--cor1);
    padding: 10px;
    border-radius: 8px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.436);}

    aside h3{
        background-color: var(--cor4);
        color: white;
        font-family: var(--font-padrao);
        padding: 10px 10px 10px 10px;
        margin: -10px -10px 0px -10px;
        border-top-left-radius:8px ;
        border-top-right-radius:8px ;}

    aside ul{
        list-style-position: inside;
        columns: 2;
        list-style-type: ' \00A0\000A0 ' ;}

    aside a{
        color: var(--cor4);
        font-style: italic;
        font-weight: bolder;
        background-color:var(--cor2);}

footer{
    background-color:var(--cor4);
    color:white;
    text-align: center;
    font-size: 1em;
    padding: 5px;}

    footer>p>a{
        color: var(--cor1);
        text-decoration: none;
        font-style: italic;}

    footer>p>a:hover{text-decoration: underline;}