@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: #64cbfb;
    --color3: #9e9e9e;
    --color4: #e9f8ff;
    --color5: #d9e8ee;
    --color6: #16af87;
    --color7: #b0c5f6;
    --color8: #00113a;
    --color9: #3abd9a;
    --color10: #1d006d;
    --color11: #116c4b;
}

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

body{
    background-color: var(--color4);
}

.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'
        'objetivo   objetivo    objetivo    objetivo    objetivo    objetivo'
        'titulo     titulo      titulo      titulo      titulo      titulo'
        'titulo     titulo      titulo      titulo      titulo      titulo'
        'titulo     titulo      titulo      titulo      titulo      titulo'
        'introducao introducao  introducao  introducao  introducao  introducao'
        'introducao introducao  introducao  introducao  introducao  introducao'
        'introducao introducao  introducao  introducao  introducao  introducao'
        'introducao introducao  introducao  introducao  introducao  introducao'
        'imagem     imagem      imagem      especifico  especifico  especifico'
        'imagem     imagem      imagem      especifico  especifico  especifico'
        'imagem     imagem      imagem      especifico  especifico  especifico'
        'imagem     imagem      imagem      especifico  especifico  especifico'
        'imagem     imagem      imagem      especifico  especifico  especifico'
        'imagem     imagem      imagem      especifico  especifico  especifico'
        'imagem     imagem      imagem      especifico  especifico  especifico'
        'imagem     imagem      imagem      especifico  especifico  especifico'
        'imagem     imagem      imagem      esperado    esperado    esperado'
        'imagem     imagem      imagem      esperado    esperado    esperado'
        'imagem     imagem      imagem      esperado    esperado    esperado'
        'imagem     imagem      imagem      esperado    esperado    esperado'
        'imagem     imagem      imagem      esperado    esperado    esperado'
        'imagem     imagem      imagem      esperado    esperado    esperado'
        '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(--color10);   
}

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

.objetivos{
    grid-area: objetivo;
    display: flex;
    justify-content: center;
    align-items: top;
    font-size: 10px;
    font-family: "PT Serif", serif;
    font-weight: 700;
    font-style: italic;
    color: var(--color3);
}

.tema-principal{
    grid-area: titulo;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: top;
}

.tema-principal h1{
    font-size: 48px;
    font-family: 'Bookman Old Style';
    font-weight: bold;

    color: var(--color6);
    text-shadow: 1px 1px 20px var(--color3);
}

.tema-principal h2{
    font-size: 24px;
    font-style: italic;
    color: var(--color11);
}

.box-introducao {
    grid-area: introducao;
    display: flex;
    flex-direction: column;
    align-content: center;
    margin: 0 15px;
    border-radius: 15px;
}

.box-introducao .introducao{
    display: flex;
}

.introducao h3{
    font-size: 36px;
    margin: 5px 10px 5px 20px;
    color: var(--color9);
    font-family: 'Bookman Old Style';
    text-shadow: 1px 1px 30px var(--color3);
}

.introducao img{
    max-width: 46px;
    height: 46px;
    margin-left: 5px;
}

.box-introducao p{
    font-size: 18px;
    font-weight: 500;
    text-align: justify;
    font-family: "PT Serif", serif;
    margin: 2px 20px;
    text-indent: 40px;
}

/*--Estilizacao para o SlideShow--*/
.slideshow-container{
    grid-area: imagem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    max-width: 690px;
    height: 390px;
    margin: 15px 15px 20px 35px;
}

.mySlides {
    display: none;
    width: 100%;
    height: 100%;
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

.especifico{
    grid-area: especifico;
    background-color: var(--color5);
    border-radius: 10px;
    margin: 15px 25px 10px 0px;
}

.especifico .objespecif{
    display: flex;
}

.objespecif h3{
    font-size: 26px;
    font-family: 'Bookman Old Style';
    font-weight: bold;
    color: var(--color9);
    margin: 15px 10px 0px 20px;
}

.objespecif img{
    max-width: 40px;
    height: 40px;
    gap: 10px;
    margin: 9px 20px 0px 0px;
}

.especifico .objtv{
    margin: 5px 20px 5px 40px;
    text-indent: 20px;
    text-align: justify;
    font-size: 17px;
    font-family: "PT Serif", serif;  
}

.esperado{
    grid-area: esperado;
    display: flex;
    flex-direction: column;
    background-color: var(--color5);
    border-radius: 10px;
    margin: 10px 25px 15px 0px;
}

.esperado .impacto{
    display: flex; 
}

.impacto h3{
    font-size: 26px;
    font-family: 'Bookman Old Style';
    font-weight: bold;
    color: var(--color9);
    margin: 10px 10px 0px 20px;
} 

.impacto img{
    max-width: 35px;
    height: 35px;
    gap: 10px;
    margin: 5px 20px 0px 0px;
}

.esperado .mudanca{
    margin: 5px 20px 10px 40px;
    text-indent: 20px;
    text-align: justify;
    font-size: 16px;
    font-weight: bold;
}

.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'
            'objetivo   objetivo    objetivo    objetivo    objetivo    objetivo'
            'titulo     titulo      titulo      titulo      titulo      titulo'
            'titulo     titulo      titulo      titulo      titulo      titulo'
            'titulo     titulo      titulo      titulo      titulo      titulo'
            'introducao introducao  introducao  introducao  introducao  introducao'
            'introducao introducao  introducao  introducao  introducao  introducao'
            'introducao introducao  introducao  introducao  introducao  introducao'
            'introducao introducao  introducao  introducao  introducao  introducao'
            'introducao introducao  introducao  introducao  introducao  introducao'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'especifico especifico  especifico  especifico  especifico  especifico'
            'especifico especifico  especifico  especifico  especifico  especifico'
            'especifico especifico  especifico  especifico  especifico  especifico'
            'especifico especifico  especifico  especifico  especifico  especifico'
            'especifico especifico  especifico  especifico  especifico  especifico'
            'especifico especifico  especifico  especifico  especifico  especifico'
            'especifico especifico  especifico  especifico  especifico  especifico'
            'esperado   esperado    esperado    esperado    esperado    esperado'
            'esperado   esperado    esperado    esperado    esperado    esperado'
            'esperado   esperado    esperado    esperado    esperado    esperado'
            'esperado   esperado    esperado    esperado    esperado    esperado'
            'esperado   esperado    esperado    esperado    esperado    esperado'
            'esperado   esperado    esperado    esperado    esperado    esperado'
            'rodape     rodape      rodape      rodape      rodape      rodape' 
            'rodape     rodape      rodape      rodape      rodape      rodape' 
        ;
    }

    .slideshow-container{
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex-grow: 1;
        max-width: 600px;
        height: 400px;
        margin: 0px auto;
    }

    .especifico{
        margin: 0px 25px 10px 25px;
    }

    .esperado{
        margin: 10px 25px 15px 25px;
    }

    .tema-principal h1{
        font-size: 46px;
    }
    
    .tema-principal h2{
        font-size: 23px;
    }
    
    .introducao h3{
        font-size: 32px;
        margin: 8px 10px 5px 20px;
    }

    .introducao img{
        max-width: 40px;
        height: 40px;
        margin: 7px 0px 0px 5px;
    }
    
    .box-introducao p{
        font-size: 17px;
    }
}

@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'
            'objetivo   objetivo    objetivo    objetivo    objetivo    objetivo'
            'titulo     titulo      titulo      titulo      titulo      titulo'
            'titulo     titulo      titulo      titulo      titulo      titulo'
            'titulo     titulo      titulo      titulo      titulo      titulo'
            'introducao introducao  introducao  introducao  introducao  introducao'
            'introducao introducao  introducao  introducao  introducao  introducao'
            'introducao introducao  introducao  introducao  introducao  introducao'
            'introducao introducao  introducao  introducao  introducao  introducao'
            'introducao introducao  introducao  introducao  introducao  introducao'
            'introducao introducao  introducao  introducao  introducao  introducao'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'especifico especifico  especifico  especifico  especifico  especifico'
            'especifico especifico  especifico  especifico  especifico  especifico'
            'especifico especifico  especifico  especifico  especifico  especifico'
            'especifico especifico  especifico  especifico  especifico  especifico'
            'especifico especifico  especifico  especifico  especifico  especifico'
            'especifico especifico  especifico  especifico  especifico  especifico'
            'especifico especifico  especifico  especifico  especifico  especifico'
            'especifico especifico  especifico  especifico  especifico  especifico'
            'esperado   esperado    esperado    esperado    esperado    esperado'
            'esperado   esperado    esperado    esperado    esperado    esperado'
            'esperado   esperado    esperado    esperado    esperado    esperado'
            'esperado   esperado    esperado    esperado    esperado    esperado'
            'esperado   esperado    esperado    esperado    esperado    esperado'
            'esperado   esperado    esperado    esperado    esperado    esperado'
            'rodape     rodape      rodape      rodape      rodape      rodape' 
            'rodape     rodape      rodape      rodape      rodape      rodape' 
        ;
    }

    .titulo h1{
        font-size: 32px;
        color: var(--color1);
        margin-right: 12px;
    }
    
    .titulo img{
        width: 40px;
        height: 40px;
    }

    .slideshow-container{
        max-width: 500px;
    }

}