@charset "UTF-8";


    @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');



    @font-face {
        font-family: 'android';
        src: url('pacote-projeto-d010/fontes/idroid.otf') format('opentype');
        font-weight: normal;
    }



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



    :root {
        --cor0:#dde0de;
        --cor1:#c4f1d9;
        --cor2:#3ddc84;
        --cor3:#2fa866;
        --cor4:#1a5c37;
        --cor5:#063d1e;
        --fonte-padrao: arial, Verdana, Helvetica, sans-serif;
        --fonte-destaque: 'Bebas Neue', cursive;
        --fonte-android: 'android', cursive;
    }



    body {
        background-color:var(--cor1);
        font-family: var(--fonte-padrao);
    }



    header {
        background-image: linear-gradient(to bottom, var(--cor3) , var(--cor5));
        padding: 15px;
        min-height: 150px;
    }



    header > p {
        color: white;
        text-align: center;
        margin-top: 10px;
        font-size: 20px;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.459);

    }



    header > h1 {
        color: white;
        font-family: var(--fonte-destaque) ;
        text-align: center;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.459);
        margin-top: 30px;
        font-size: 50px;
    }



    nav {
        background-color: var(--cor5);
        padding: 10px;
    }



    nav > a {
        color:white;
        margin-left: 25px;
        font-weight: bold;
        padding: 5px;
        padding-bottom: 10px;
        transition: 0.5s;
    }



    .menu:hover {
        background-color: rgb(57, 214, 57);
        padding: 10px;
        border-radius: 10px;
        font-weight: bolder;
        color: var(--cor5);
    }



    .menu:visited {
        color: rgb(66, 112, 40);
        font-weight: bold;
    }



    main {
        background-color: white;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        margin: auto;
        margin-bottom: 30px;
        min-width: 320px ;
        max-width: 1000px ;
        padding: 30px;
        box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.205);
    }



    main h1 {
        color: var(--cor4);
        font-family: var(--fonte-android);
        font-size: 2em;
    }



    main p {
        margin: 25px 0px;
        font-size: 18px;
        text-align: justify;
        text-indent: 30px;
        line-height: 1em;
    }



    main h2 {
        font-family: var(--fonte-android);
        background-image: linear-gradient(to right  ,var(--cor4),var(--cor1) 50%, transparent);
        padding: 3px;
    }





    main img {
        width:100%;
    }



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



    main a::before { 
        content: "\1F517\00A0";
    }



    div.video {
        background-color: var(--cor5);
        margin: -10px -20px;
        padding: 50px;
        padding-bottom: 53.5%;
        position: relative;
    }




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


    }




    aside {
        background-color: var(--cor1);
        border-radius: 12px;
        padding: 25px; 
        box-shadow: -1px -1px 7px  rgba(0, 0, 0, 0.336);
        margin-top: 55px;

    }



     aside > h3 {
        background-color: var(--cor4);
        margin: -25px -25px 0px -25px;
        border-radius: 12px 12px 0px 0px;
        padding: 8px; 
        color: white;
        
    }



    footer {
        background-color: var(--cor5);
        color: white;
        text-align: center;
        padding: 5px;
        padding-bottom: 10px;
    }


    footer a {
        color: var(--cor1);
    }




    footer a:hover {
        color: var(--cor5);
        font-weight: bold;
        padding: 5px;
        background-color: white;
        border-radius: 10px;
        transition: 0.5s;
    }




    ul  {
        list-style-position: inside;
        margin-left: 25px;
        columns: 2;
        text-align: left;
        list-style-type: "\2705\00A0\00A0";
    }
    


    a {
        text-decoration: none;
        color: var(--cor3) ;
    }


    strong {
        color: var(--cor4);
    }