@charset "UTF-8";
    @import url('https://fonts.googleapis.com/css2?family=Antonio:wght@100..700&family=Bebas+Neue&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
        @font-face {
        font-family: 'idroid';
        src: url('fontes/idroid.otf') format('opentype');
        font-weight: normal;
        font-style: normal;
        }
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
    body{
        background-color: #84E1AD;
        font-family: Arial, Helvetica, sans-serif;
    }
    header{
        background: linear-gradient(to bottom, #3CD782, #1A5C38);
        color: white;
        padding-top: 27px;
        padding-left: 10px;
        padding-bottom: 6px;
        padding-right: 32px;
        text-align: center;
        box-shadow: 0px 6px 9px #5ba57b;
    }
    header > p{
        text-align: center;
        text-shadow: 2px 2px 2px #0e562f;
        padding: 25px
    }
    header > nav{
        text-align: left;
        font-weight: bold;
    }
    nav > a{
        color: white;
        text-decoration: none;
        padding: 10px;
        font-size: 0.9em;
        transition-duration: .5;
    }
    nav > a:hover{
        text-decoration: underline;
        background-color: #c7f2d93f;
        border-radius: 4px;
        margin: 2px;
        padding: 4px;
    }
    mark{
        background-color: #9fefc288
    }
    h1{
        font-family: idroid;
        color: #3F7557;
    }
    h1#principal{
        font-family: "Bebas Neue";
        color: white;
        font-weight: 100;
        text-shadow: 2px 2px 2px #16663a;
    }
    h2{
        font-family: idroid;
        color: #3F7557;
        background: linear-gradient(to right, #9fefc262, white);
        padding: 3px;
        text-indent: 6px;
        }
    main{
        background-color: white;
        padding: 20px;
        max-width: 1000px;
        min-width: 300px;
        margin: auto;
        margin-bottom: 30px;
        border-radius: 0px 0px 15px 15px;
        box-shadow: 2px 2px 9px #508c6a;;
    }
    p{
        text-align: justify;
        text-indent: 35px;
        padding: 7px 0;
        line-height: 1.5em;
    }
    img{
        display: block;
        margin: 5px auto;
        padding: 5px 0px;
        max-width: 100%;
    }
    span{
        color: #3f7557;
        font-weight: bold;
    }
    span > a{
        color: #3f7557;
        font-weight: bold;
        text-decoration: none;
    }
    span > a:hover{
        text-decoration: underline;
    }
    span > a::after{
        content: '🔗';
    }
    .video{
        display: block;
        background-color: #16663a;
        padding: 35px;
        margin: 0px -20px;
        text-align: center;
    }
    .video iframe{
        width: 100%;
        max-width: 600px;
        height: 338px;    
    }
    section{
        padding: 20px;
    }
    .quadro{
        background-color: #c5ebd6;
        border-radius: 10px;
        box-shadow: 4px 5px 17px #c0bebe;
        padding: 0;
    }
    section > p{
        padding-left: 15px;
        padding-bottom: 7px;
        padding-right: 15px;
        padding-top: 7px;
    }
    section > h3{
        background-color: #2fa866;
        color: white;
        padding-bottom: 7px;
        padding: 10px;
        border-radius: 10px 10px 0px 0px;
    }
    .fim{
        padding-top: 15px
    }
    div{
        display: flex;
        gap: 50px;
    }
    .coluna{
        list-style: none;
        padding: auto;
        margin: auto;
    }
    div > ul > li::before{
        content: '✔ ';
    }
    section > p > p{
        padding-top: 15px;
    }
    footer{
        background-color: #1a5c38;
        color: white;
        font-size: 0.7em;
        padding: 0;
    }
    footer > p{
        text-align: center;
    }
    footer > p > a{
        color: white;
        font-weight: bold;
        text-decoration: none;
    }
    footer > p > a:hover{
        text-decoration: underline;
    }