body{
    font-family: "Delius Unicase", serif;
    color: #684901;
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #b72b2e; }
::-webkit-scrollbar-thumb:hover { background: #555; }

img{ max-width: 100%; overflow: hidden; }

.header{
    position: relative;
    background:#d32527 url('img/bg-header.webp') no-repeat center center;
    background-size: cover;
    padding: 1.5rem;
}

.brasao{ position: absolute; top: 50px; left: 150px; width: 180px; }

.bola1, .bola2{ position: absolute; }

.bola1{ top: 0; left: 450px; animation: bola1 6s linear infinite; }
.bola2{ top: -20px; right: 450px; animation: bola2 6s linear infinite; }

@keyframes bola1 {
    0% { transform: translate(10px, -20px); }
    50% { transform: translate(0, 0);}
    100% { transform: translate(10px, -20px); }
}

@keyframes bola2 {
    0% { transform: translate(5px, 20px); }
    50% { transform: translate(0, 0);}
    100% { transform: translate(5px, 20px); }
}

.main{
    background: #f4e2ca;
    padding: 5rem 0;
    min-height: 500px;
    position: relative;
}

.arv-left{ width: 190px; position: absolute; top: 0; left: 0; }
.arv-right{ width: 190px; position: absolute; top: 0; right: 0; transform:scaleX(-1); }

.main h1{ font-weight: bold; margin: 2rem 0; }

.box-comunidade{
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 25px;
    text-decoration: none;
    color: #684901;
    margin: 1.5rem 0;
    border: 1px solid #684901;
    overflow: hidden;
}

.box-comunidade:hover{
    -webkit-box-shadow: 0px 0px 10px 0px rgba(104,73,1,1);
    -moz-box-shadow: 0px 0px 10px 0px rgba(104,73,1,1);
    box-shadow: 0px 0px 10px 0px rgba(104,73,1,1);
}

.box-comunidade .imagem{ width: 40%; }
.box-comunidade .imagem img{ max-width: 100%; height: 220px; overflow: hidden; object-fit: cover; }

.box-comunidade .info{ width:50%; padding: 1rem 1.5rem; }
.box-comunidade .info .titulo{ font-size: 1.4rem; text-transform: uppercase; font-weight: bold; margin-bottom: 1rem; }

.box-comunidade .icon-data{ display: flex; }
.box-comunidade .icon-data .icon{ width: 48px; margin-right: 5px; }



.footer{
    background: #d32527;
    padding: 1rem 0;
    color: #fff;
    font-size: 8pt;
    text-align: center;
}


@media (max-width: 575.98px) {

    .header{ background-size: 100% 100%; }

    .brasao{ top: 10px; left: 0; right: 0; margin: 0 auto; width: 120px; }

    .logo{ display: block; margin-top: 2rem; }

    .bola1{ width: 60px; top: 0; left: 10px; animation: bola1 6s linear infinite; }
    .bola2{ width: 60px; top: -20px; right: 10px; animation: bola2 6s linear infinite; }


    .arv-left{ width: 100px; }
    .arv-right{ width: 100px; }

}