@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: #db7b3b;
    --color7: #b0c5f6;
    --color8: #00113a;
    --color9: #eb9358;
    --color10: #1d006d;
    --color11: #943603;
}

*{
    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'
        'problema   problema    problema    problema    problema    problema'
        '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'
        'ameaca     ameaca      ameaca      dados       dados       dados'
        'ameaca     ameaca      ameaca      dados       dados       dados'
        'ameaca     ameaca      ameaca      dados       dados       dados'
        'ameaca     ameaca      ameaca      dados       dados       dados'
        'ameaca     ameaca      ameaca      dados       dados       dados'
        'ameaca     ameaca      ameaca      dados       dados       dados'
        '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'
        '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;
}

.problema{
    grid-area: problema;
    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: 42px;
    font-family: 'Bookman Old Style';
    font-weight: bold;

    color: var(--color6);
    text-shadow: 1px 1px 18px 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: 37px;
    margin: 0px 10px 5px 20px;
    color: var(--color9);
    font-family: 'Bookman Old Style';
    text-shadow: 1px 1px 30px var(--color3);
}

.introducao img{
    max-width: 45px;
    height: 45px;
    margin: 0px 0px 5px 5px;
}

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

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

.perigo p{
    margin: 10px 20px  0px 20px;
    text-indent: 40px;
    font-size: 17px;
    font-family: "PT Serif", serif;
    text-align: justify;
}

.perigo .branqueamento{
    margin: 5px 20px 5px 40px;
    text-indent: 20px;
    font-size: 17px;
    font-weight: bold;
}

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

.dados .alarme{
    display: flex; 
}

.alarme h3{
    font-size: 23px;
    font-family: 'Bookman Old Style';
    font-weight: bold;
    color: var(--color9);
    margin: 12px 10px 5px 20px;
} 

.alarme img{
    display: flex;
    max-width: 35px;
    height: 35px;
    margin: 5px 20px 0px 0px;
}

.dados .pesquisas{
    display: flex;
    flex-direction: column;
    margin: 4px 20px 10px 40px;
    text-indent: 20px;
    text-align: justify;
    font-size: 16px;
}

/*--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: 640px;
    height: 360px;
    margin: 10px auto 10px auto;
}

.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}
}

.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'
            'problema   problema    problema    problema    problema    problema'
            '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'
            'ameaca     ameaca      ameaca      dados       dados       dados'
            'ameaca     ameaca      ameaca      dados       dados       dados'
            'ameaca     ameaca      ameaca      dados       dados       dados'
            'ameaca     ameaca      ameaca      dados       dados       dados'
            'ameaca     ameaca      ameaca      dados       dados       dados'
            'ameaca     ameaca      ameaca      dados       dados       dados'
            'ameaca     ameaca      ameaca      dados       dados       dados'
            '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'
            'rodape     rodape      rodape      rodape      rodape      rodape' 
            'rodape     rodape      rodape      rodape      rodape      rodape' 
        ;
    }

    .tema-principal h2{
        font-size: 23px;
    }
    
    .introducao h3{
        font-size: 34px;
    }
    
    .perigo p{
        font-size: 16px;
    }
    
    .perigo .branqueamento{
        font-size: 16px;
    }
    
    .alarme h3{
        font-size: 21px;
    } 
    
    .alarme img{
        max-width: 30px;
        height: 30px;
    }
    
    .dados .pesquisas{
        font-size: 15px;
    }
    
}

@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'
            'problema   problema    problema    problema    problema    problema'
            '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'
            'ameaca     ameaca      ameaca      dados       dados       dados'
            'ameaca     ameaca      ameaca      dados       dados       dados'
            'ameaca     ameaca      ameaca      dados       dados       dados'
            'ameaca     ameaca      ameaca      dados       dados       dados'
            'ameaca     ameaca      ameaca      dados       dados       dados'
            'ameaca     ameaca      ameaca      dados       dados       dados'
            'ameaca     ameaca      ameaca      dados       dados       dados'
            'ameaca     ameaca      ameaca      dados       dados       dados'
            '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'
            '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;
    }

    .tema-principal h1{
        font-size: 38px;
    }

    .box-introducao p{
        font-size: 16px;
    }

    .perigo p{
        font-size: 15px;
    }

    .perigo .branqueamento{
        font-size: 15px;
    }

    .alarme h3{
        font-size: 20px;
    } 

    .alarme img{
        max-width: 28px;
        height: 28px;
    }

    .tema-principal h2{
        font-size: 22px;
    }
    
    .introducao h3{
        font-size: 30px;
    }
}