@font-face {
    font-family: 'Merienda';
    src: url('fontes/Merienda/Merienda-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'Merienda', sans-serif;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' %3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='0' y1='0' y2='1' gradientTransform='rotate(0,0.5,0.5)'%3E%3Cstop offset='0' stop-color='%23009739'/%3E%3Cstop offset='1' stop-color='%23FFCC29'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpattern id='b' width='16' height='16' patternUnits='userSpaceOnUse'%3E%3Ccircle fill='%23ffffff' cx='8' cy='8' r='8'/%3E%3C/pattern%3E%3Crect width='100%25' height='100%25' fill='url(%23a)'/%3E%3Crect width='100%25' height='100%25' fill='url(%23b)' fill-opacity='0.07'/%3E%3C/svg%3E");
    background-attachment: fixed;
}

.page-wrapper {
    position: relative;
}

.header {
    background-image: url(imagens/brazil-2697846_1280.jpg);
    background-position: center;
    max-width: 1200px;
    color: #FFCC29;
    text-align: center;
    padding: 10px;
    margin-left: auto;
    margin-right: auto;
    font-weight: bold;
    text-shadow: 1px 1px 2px #002776;
    border-left: 5px solid #002776;
    border-right: 5px solid #FFCC29;
    position: relative;
}

.header h2 {
    font-style: italic;
    color: #FFCC29;
    display: inline-block;
    padding-bottom: 5px;
    font-weight: bolder;
    text-shadow: 1px 1px 2px #002776;
    position: relative;
}

.summary,
.preamble,
.explanation,
.participation,
.benefits,
.requirements,
.footer {
    background-color: rgba(255, 255, 255, 0.8);
    border-left: 5px solid #002776;
    border-right: 5px solid #FFCC29;
    padding: 10px;
    margin: 10px 0;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
    position: relative;
}

.summary::before,
.preamble::before,
.explanation::before,
.participation::before,
.benefits::before,
.requirements::before,
.footer::before,
.header::before,
#extraDiv1::before,
#extraDiv2::before,
#extraDiv3::before,
#extraDiv4::before,
#extraDiv5::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 5px;
    width: 100%;
    background: linear-gradient(to right, #002776, #FFCC29);
    border-radius: 0;
}

.summary::after,
.preamble::after,
.explanation::after,
.participation::after,
.benefits::after,
.requirements::after,
.footer::after,
.header::after,
#extraDiv1::after,
#extraDiv2::after,
#extraDiv3::after,
#extraDiv4::after,
#extraDiv5::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 5px;
    width: 100%;
    background: linear-gradient(to right, #002776, #FFCC29);
    border-radius: 0;
}

.summary h3,
.preamble h3,
.explanation h3,
.participation h3,
.benefits h3,
.requirements h3,
.footer h3 {
    color: #FFCC29;
    text-shadow: 1px 1px 2px #002776;
    font-size: 1.5rem;
}

.summary p,
.preamble p,
.explanation p,
.participation p,
.benefits p,
.requirements p,
.footer p {
    color: #009739;
    font-size: 1.5rem;
}

.sidebar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 100%;
    background: linear-gradient(to bottom, #009739, #FFCC29);
    border-radius: 0;
    z-index: 1;
    pointer-events: none;
}

.sidebar {
    background: linear-gradient(to bottom, #009739, #FFCC29);
    color: #FFF;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 250px;
    padding: 10px 05px 10px 60px;
    margin-right: -270px;
    transition: 0.5s;
    opacity: 0.9;
    z-index: 10;
    position: fixed;
    overflow: hidden;
}

.sidebar:hover {
    margin-right: 0px;
    transition: 0.5s;
}

.sidebar a {
    color: #002776;
    text-decoration: none;
}

.page-wrapper {
    position: relative;
}

#extraDiv1 {
    background-image: url('imagens/pexels-florencia-potter-82066-351283.jpg');
    background-size: cover;
    background-position: center;
    width: 1200px;
    height: 300px;
    position: absolute;
    top: 410px;
    left: 50%;
    border-left: 5px solid #002776;
    border-right: 5px solid #FFCC29;
    padding: 10px;
    transform: translateX(-50%);
    z-index: 0;
    opacity: 0.9;
}

#extraDiv2 {
    background-image: url('imagens/ounce-3913742_1280.jpg');
    background-size: cover;
    background-position: center;
    width: 1200px;
    height: 300px;
    position: absolute;
    top: 1160px;
    left: 50%;
    border-left: 5px solid #002776;
    border-right: 5px solid #FFCC29;
    padding: 10px;
    transform: translateX(-50%);
    z-index: 0;
    opacity: 0.9;
}

#extraDiv3 {
    background-image: url('imagens/macaw-320006_1280.jpg');
    background-size: cover;
    background-position: center;
    width: 1200px;
    height: 300px;
    position: absolute;
    top: 2025px;
    left: 50%;
    border-left: 5px solid #002776;
    border-right: 5px solid #FFCC29;
    padding: 10px;
    transform: translateX(-50%);
    z-index: 0;
    opacity: 0.9;
}

#extraDiv4 {
    background-image: url('imagens/national-congress-5991196_1280.jpg');
    background-size: cover;
    background-position: center;
    width: 1200px;
    height: 300px;
    position: absolute;
    top: 2915px;
    left: 50%;
    border-left: 5px solid #002776;
    border-right: 5px solid #FFCC29;
    padding: 10px;
    transform: translateX(-50%);
    z-index: 0;
    opacity: 0.9;
}

#extraDiv5 {
    background-image: url('imagens/people-1284253_1280.jpg');
    background-size: cover;
    background-position: center;
    width: 1200px;
    height: 300px;
    position: absolute;
    top: 3480px;
    left: 50%;
    border-left: 5px solid #002776;
    border-right: 5px solid #FFCC29;
    padding: 10px;
    transform: translateX(-50%);
    z-index: 0;
    opacity: 0.9;
}

.page-wrapper {
    position: relative;
    height: 4300px;
}

.preamble,
.explanation,
.participation,
.benefits,
.requirements {
    margin-top: 340px;
}