@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
    --color1: #219bac;
    --color2: #1692cb;
    --color3: #013f56;
    --color4: #02628c;
    --color5: #3e3e3e;
    --color6: #2c2caa;
    --color7: #2c5cca;
    --color8: #00174b;
    --color9: #e9f8ff;
    --color10: #64cbfb;
    --color11: #cce0ef;
}

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Lora", serif;
    text-decoration: none;
}

.container{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 30px;
    grid-template-areas:
        'header     header      header      header      header      header'
        'header     header      header      header      header      header'
        'titulo     titulo      titulo      titulo      titulo      titulo'
        'titulo     titulo      titulo      titulo      titulo      titulo'
        'titulo     titulo      titulo      titulo      titulo      titulo'
        'titulo     titulo      titulo      titulo      titulo      titulo'
        'titulo     titulo      titulo      titulo      titulo      titulo'
        'recife     recife      recife      recife      recife      recife'
        'recife     recife      recife      recife      recife      recife'
        'recife     recife      recife      recife      recife      recife'
        'recife     recife      recife      recife      recife      recife'
        'recife     recife      recife      recife      recife      recife'
        'recife     recife      recife      recife      recife      recife'
        'recife     recife      recife      recife      recife      recife'
        'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
        'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
        'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
        'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
        'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
        'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
        'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
        'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
        'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
        'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
        'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
        'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
        'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
        'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
        'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
        'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
        'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
        'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
        'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
        'pontos     pontos      pontos      pontos      pontos      pontos'
        'pontos     pontos      pontos      pontos      pontos      pontos'
        'pontos     pontos      pontos      pontos      pontos      pontos'
        'conheca    conheca     conheca     conheca     conheca     conheca'
        'conheca    conheca     conheca     conheca     conheca     conheca'
        'conheca    conheca     conheca     conheca     conheca     conheca'
        'conheca    conheca     conheca     conheca     conheca     conheca'
        'conheca    conheca     conheca     conheca     conheca     conheca'
        'conheca    conheca     conheca     conheca     conheca     conheca'
        'conheca    conheca     conheca     conheca     conheca     conheca'
        'ocean      ocean       ocean       clean       clean       clean'
        'ocean      ocean       ocean       clean       clean       clean'
        'ocean      ocean       ocean       clean       clean       clean'
        'ocean      ocean       ocean       clean       clean       clean'
        'ocean      ocean       ocean       clean       clean       clean'
        'doacao     doacao      doacao      doacao      doacao      doacao'
        'doacao     doacao      doacao      doacao      doacao      doacao'
        'doacao     doacao      doacao      doacao      doacao      doacao'
        'doacao     doacao      doacao      doacao      doacao      doacao'
        'doacao     doacao      doacao      doacao      doacao      doacao'
        'doacao     doacao      doacao      doacao      doacao      doacao'
        'rodape     rodape      rodape      rodape      rodape      rodape' 
        'rodape     rodape      rodape      rodape      rodape      rodape' 
    ;
}

.header{
    grid-area: header;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 60px;
    background-color: var(--color8);
}

.header .atalho{
    display: flex;
    font-family: "PT Serif", serif;
    font-weight: 700;
    font-size: 18px;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
}

#menu{
    display: block;
    position: absolute;
    width: 350px;
    top: 60px;
    left: 0px;
    list-style: none;
    background-color: var(--color8);
    transition: .6s;
    z-index: 1000;
    height: 0px;
    visibility: hidden;
    overflow-y: hidden;
}

#nav.active #menu{
    height: calc(100vh - 60px);
    visibility: visible;
    overflow-y: auto;
}

#menu a{
    display: block;
    padding: 1rem 1rem;
    margin: 0 1rem;
    color: white;
    border-top: 2px solid rgba(255, 255, 255, 0.07);
}

#menu #selecionado{
    color: #454de1;
    font-size: 22px;
    font-weight: bold;
}

#btn-menu{
    display: flex;
    padding: .5rem 1rem;
    font-family: "PT Serif", serif;
    font-weight: 700;
    font-size: 22px;
    border: none;
    background: none;
    color: white;
    cursor: pointer;
    gap: .5rem;
}

#hamburger{
    margin-top: 7px;
    border-top: 3px solid;
    width: 24px;
}

#hamburger::after, #hamburger::before {
    content: '';
    display: block;
    width: 24px;
    height: 2.5px;
    background: currentColor;
    margin-top: 5px;
    transition: .3s;
    position: relative;
}

#nav.active #hamburger{
    border-top-color: transparent;
}

#nav.active #hamburger::before{
    transform: rotate(135deg);
}

#nav.active #hamburger::after{
    transform: rotate(-135deg);
    top: -7px;
}

li a:hover{
    background-color: rgba(255, 255, 255, 0.421);
}

.header .titulo{
    grid-column: 2/5;
    grid-row: 1/2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.titulo h1{
    font-family: 'Bookman Old Style';
    font-size: 40px;
    color: var(--color1);
    margin-right: 20px;
}

.titulo img{
    width: 45px;
    height: 45px;
}

.header .login{
    grid-column: 5/6;
    grid-row: 1/2;
    display: flex;
    align-items: center;
    justify-content: right;
    margin-right: 15px;
}

.login #login_btn{
    padding: 6px 18px;
    border: none;
    border-radius: 35px;
    cursor: pointer;
    transition: all 0.9s ease 0s;
    font-family: "PT Serif", serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--color8);   
}

.login #login_btn:hover{
    background-color: var(--color2);
    color: white;
}

.topo{
    grid-area: titulo;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 20px 40px 32px 40px;
}

.topo h1{
    font-family: 'Bookman Old Style';
    font-size: 64px;
    color: var(--color1);
}

.topo h2{
    font-family: 'Bookman Old Style';
    font-size: 26px;
    font-style: italic;
    color: var(--color3);
}

.recife{
    grid-area: recife;
    margin: 0px 45px 5px 45px;
    border-radius: 15px;
    background-color: var(--color11);
}

.recife h3{
    font-size: 34px;
    font-weight: bolder;
    font-family: 'Bookman Old Style';
    color: var(--color4);
    margin: 10px 10px 0px 10px;
}
.recife p{
    font-size: 18px;
    font-weight: 500;
    text-align: justify;
    text-indent: 40px;
    margin: 5px 14px 0px 14px;
}

/* Slideshow container */
.slideshow-container{
    grid-area: slideshow;
    max-width: 800px;
    max-height: 550px;
    position: relative;
    top: 20px;
    margin: auto;
    overflow: hidden; /* Evitar que as imagens ultrapassem o container */
}
  
/* Hide the images by default */
.mySlides img{
    width: 100%;
    height: 550px;
    object-fit: cover;
}

/* Next & previous buttons */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}
  
/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}
  
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
}
  
/* Number text (1/4 etc) */
.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* The dots/bullets/indicators */
.pontos{
    grid-area: pontos;
    display: flex;
    justify-content: center;
}
.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 35px 3px;
    background-color: #898989;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}
  
.active, .dot:hover {
    background-color: #4b4a4a;
}

/* Fading animation */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}
  
@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

.conheca{
    grid-area: conheca;
    margin: 0px 45px 0px 45px;
    border-radius: 15px 15px 0px 0px;
    background-color: var(--color11);
}

.conheca h3{
    font-size: 34px;
    font-weight: bolder;
    font-family: 'Bookman Old Style';
    color: var(--color4);
    margin: 10px;
}
.conheca p{
    font-size: 18px;
    font-weight: 500;
    text-align: justify;
    text-indent: 40px;
    margin: 10px 14px 0px 14px;
}

.ocean{
    grid-area: ocean;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 45px;
    border-radius: 0px 0px 0px 15px;
    background-color: var(--color11);
}

.ocean img{
    margin: 0px 20px 30px 200px;
    max-width: 310px;
    height: 120px;
}

.clean{
    grid-area: clean;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 45px;
    border-radius: 0px 0px 15px 0px;
    background-color: var(--color11);
}

.clean h1{
    font-family: 'Bookman Old Style';
    font-size: 45px;
    color: var(--color1);
    margin: 0px 10px 30px 20px;
}

.clean img{
    margin: 0px 45px 50px 10px ;
    width: 58px;
    height: 58px;
}

.doacao{
    grid-area: doacao;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.doacao h3{
    font-size: 24px;
}

.doacao p{
    margin-top: 3px;
    font-size: 20px;
}

.doacao .final{
    font-size: 21px;
    font-style: italic;
}

.rodape{
    grid-area: rodape;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    color: white;
    background-color: var(--color8);
    font-size: 18px;
    font-family: "PT Serif", serif;
    font-weight: 700;
    font-style: italic;
}

@media screen and (max-width: 980px){
    .container{
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: 30px;
        grid-template-areas:
            'header     header      header      header      header      header'
            'header     header      header      header      header      header'
            'titulo     titulo      titulo      titulo      titulo      titulo'
            'titulo     titulo      titulo      titulo      titulo      titulo'
            'titulo     titulo      titulo      titulo      titulo      titulo'
            'titulo     titulo      titulo      titulo      titulo      titulo'
            'titulo     titulo      titulo      titulo      titulo      titulo'
            'recife     recife      recife      recife      recife      recife'
            'recife     recife      recife      recife      recife      recife'
            'recife     recife      recife      recife      recife      recife'
            'recife     recife      recife      recife      recife      recife'
            'recife     recife      recife      recife      recife      recife'
            'recife     recife      recife      recife      recife      recife'
            'recife     recife      recife      recife      recife      recife'
            'recife     recife      recife      recife      recife      recife'
            'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
            'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
            'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
            'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
            'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
            'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
            'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
            'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
            'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
            'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
            'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
            'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
            'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
            'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
            'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
            'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
            'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
            'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
            'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
            'pontos     pontos      pontos      pontos      pontos      pontos'
            'pontos     pontos      pontos      pontos      pontos      pontos'
            'pontos     pontos      pontos      pontos      pontos      pontos'
            'conheca    conheca     conheca     conheca     conheca     conheca'
            'conheca    conheca     conheca     conheca     conheca     conheca'
            'conheca    conheca     conheca     conheca     conheca     conheca'
            'conheca    conheca     conheca     conheca     conheca     conheca'
            'conheca    conheca     conheca     conheca     conheca     conheca'
            'conheca    conheca     conheca     conheca     conheca     conheca'
            'conheca    conheca     conheca     conheca     conheca     conheca'
            'conheca    conheca     conheca     conheca     conheca     conheca'
            'conheca    conheca     conheca     conheca     conheca     conheca'
            'ocean      ocean       ocean       clean       clean       clean'
            'ocean      ocean       ocean       clean       clean       clean'
            'ocean      ocean       ocean       clean       clean       clean'
            'ocean      ocean       ocean       clean       clean       clean'
            'doacao     doacao      doacao      doacao      doacao      doacao'
            'doacao     doacao      doacao      doacao      doacao      doacao'
            'doacao     doacao      doacao      doacao      doacao      doacao'
            'doacao     doacao      doacao      doacao      doacao      doacao'
            'doacao     doacao      doacao      doacao      doacao      doacao'
            'doacao     doacao      doacao      doacao      doacao      doacao'
            'rodape     rodape      rodape      rodape      rodape      rodape' 
            'rodape     rodape      rodape      rodape      rodape      rodape' 
        ;
    }

    .topo h2{
        font-size: 23px;
    }

    .recife p{
        font-size: 17px;
    }

    .slideshow-container{
        max-width: 650px;
        max-height: 540px;
    }
    
    .ocean img{
        margin: 0px 15px 35px 55px;
        max-width: 250px;
        height: 100px;
    }
    
    .clean h1{
        font-size: 35px;
        color: var(--color1);
        margin: 0px 10px 25px 10px;
    }
    
    .clean img{
        margin: 0px 10px 40px 10px ;
        width: 55px;
        height: 55px;
    }

    .doacao h3{
        font-size: 22px;
    }
    
    .doacao p{
        margin-top: 3px;
        font-size: 18px;
    }
    
    .doacao .final{
        font-size: 20px;
        font-style: italic;
    }
}

@media screen and (max-width: 750px){
    .container{
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: 30px;
        grid-template-areas:
            'header     header      header      header      header      header'
            'header     header      header      header      header      header'
            'titulo     titulo      titulo      titulo      titulo      titulo'
            'titulo     titulo      titulo      titulo      titulo      titulo'
            'titulo     titulo      titulo      titulo      titulo      titulo'
            'titulo     titulo      titulo      titulo      titulo      titulo'
            'titulo     titulo      titulo      titulo      titulo      titulo'
            'recife     recife      recife      recife      recife      recife'
            'recife     recife      recife      recife      recife      recife'
            'recife     recife      recife      recife      recife      recife'
            'recife     recife      recife      recife      recife      recife'
            'recife     recife      recife      recife      recife      recife'
            'recife     recife      recife      recife      recife      recife'
            'recife     recife      recife      recife      recife      recife'
            'recife     recife      recife      recife      recife      recife'
            'recife     recife      recife      recife      recife      recife'
            'recife     recife      recife      recife      recife      recife'
            'recife     recife      recife      recife      recife      recife'
            'recife     recife      recife      recife      recife      recife'
            'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
            'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
            'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
            'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
            'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
            'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
            'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
            'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
            'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
            'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
            'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
            'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
            'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
            'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
            'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
            'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
            'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
            'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
            'slideshow  slideshow   slideshow   slideshow   slideshow   slideshow'
            'pontos     pontos      pontos      pontos      pontos      pontos'
            'pontos     pontos      pontos      pontos      pontos      pontos'
            'pontos     pontos      pontos      pontos      pontos      pontos'
            'conheca    conheca     conheca     conheca     conheca     conheca'
            'conheca    conheca     conheca     conheca     conheca     conheca'
            'conheca    conheca     conheca     conheca     conheca     conheca'
            'conheca    conheca     conheca     conheca     conheca     conheca'
            'conheca    conheca     conheca     conheca     conheca     conheca'
            'conheca    conheca     conheca     conheca     conheca     conheca'
            'conheca    conheca     conheca     conheca     conheca     conheca'
            'conheca    conheca     conheca     conheca     conheca     conheca'
            'conheca    conheca     conheca     conheca     conheca     conheca'
            'conheca    conheca     conheca     conheca     conheca     conheca'
            'ocean      ocean       ocean       clean       clean       clean'
            'ocean      ocean       ocean       clean       clean       clean'
            'ocean      ocean       ocean       clean       clean       clean'
            'ocean      ocean       ocean       clean       clean       clean'
            'doacao     doacao      doacao      doacao      doacao      doacao'
            'doacao     doacao      doacao      doacao      doacao      doacao'
            'doacao     doacao      doacao      doacao      doacao      doacao'
            'doacao     doacao      doacao      doacao      doacao      doacao'
            'doacao     doacao      doacao      doacao      doacao      doacao'
            'doacao     doacao      doacao      doacao      doacao      doacao'
            'rodape     rodape      rodape      rodape      rodape      rodape' 
            'rodape     rodape      rodape      rodape      rodape      rodape' 
        ;
    }

    .titulo h1{
        font-size: 30px;
        color: var(--color1);
        margin-right: 10px;
    }
    
    .titulo img{
        width: 36px;
        height: 36px;
    }
    
    .topo h1{
        font-family: 'Bookman Old Style';
        font-size: 56px;
        color: var(--color1);
    }
    
    .topo h2{
        font-family: 'Bookman Old Style';
        font-size: 20px;
        font-style: italic;
        color: var(--color3);
    }

    .slideshow-container{
        max-width: 575px;
        max-height: 475px;
    }
    .ocean img{
        margin: 0px 15px 35px 55px;
        max-width: 250px;
        height: 100px;
    }
    
    .clean h1{
        font-size: 35px;
        color: var(--color1);
        margin: 0px 10px 25px 10px;
    }
    
    .doacao h3{
        font-size: 18px;
    }
    
    .doacao p{
        margin-top: 3px;
        font-size: 16px;
    }
    
    .doacao .final{
        font-size: 18px;
        font-style: italic;
    }
}