@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: #141488;
    --color7: #b0c5f6;
    --color8: #00113a;
    --color9: #2c33b4;
    --color10: #1d006d;
    --color11: #454de1;
}

*{
    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'
        'tech       tech        tech        tech        tech        tech'
        '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'
        'python     python      python      python      python      python'
        'python     python      python      python      python      python'
        'python     python      python      python      python      python'
        'python     python      python      python      python      python'
        'python     python      python      python      python      python'
        'edge       edge        edge        edge        edge        edge'
        'edge       edge        edge        edge        edge        edge'
        'edge       edge        edge        edge        edge        edge'
        'edge       edge        edge        edge        edge        edge'
        'edge       edge        edge        edge        edge        edge'
        'imagem     imagem      imagem      imagem      imagem      imagem'
        'imagem     imagem      imagem      imagem      imagem      imagem'
        'imagem     imagem      imagem      imagem      imagem      imagem'
        'imagem     imagem      imagem      imagem      imagem      imagem'
        'imagem     imagem      imagem      imagem      imagem      imagem'
        'imagem     imagem      imagem      imagem      imagem      imagem'
        'imagem     imagem      imagem      imagem      imagem      imagem'
        'imagem     imagem      imagem      imagem      imagem      imagem'
        'imagem     imagem      imagem      imagem      imagem      imagem'
        '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: var(--color11);
    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;
}

.tecnologia{
    grid-area: tech;
    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 10px var(--color3);
}

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

.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: 33px;
    margin: 4px 20px 0px 20px;
    color: var(--color9);
    font-family: 'Bookman Old Style';
    text-shadow: 1px 1px 30px var(--color3);
}

.introducao img{
    max-width: 50px;
    height: 50px;
    margin-left: 10px;
}

.box-python{
    grid-area: python;
    display: flex;
    flex-direction: column;

    background-color: var(--color5);
    border-radius: 10px;
    margin: 2px 20px 10px 20px;
}

.box-python h3{
    font-size: 30px;
    font-family: 'Bookman Old Style';
    font-style: italic;
    margin: 10px 20px 0px 20px;
    color: var(--color11);
}

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

.box-edge{
    grid-area: edge;
    display: flex;
    flex-direction: column;

    background-color: var(--color5);
    border-radius: 10px;
    margin: 10px 20px 0px 20px;
}

.box-edge h3{
    font-size: 30px;
    font-family: 'Bookman Old Style';
    font-style: italic;
    margin: 10px 20px 3px 20px;
    color: var(--color11);
}

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

/*--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: 550px;
    height: 350px;
    margin: 20px auto 20px 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'
            'tech       tech        tech        tech        tech        tech'
            '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'
            'python     python      python      python      python      python'
            'python     python      python      python      python      python'
            'python     python      python      python      python      python'
            'python     python      python      python      python      python'
            'python     python      python      python      python      python'
            'python     python      python      python      python      python'
            'edge       edge        edge        edge        edge        edge'
            'edge       edge        edge        edge        edge        edge'
            'edge       edge        edge        edge        edge        edge'
            'edge       edge        edge        edge        edge        edge'
            'edge       edge        edge        edge        edge        edge'
            'edge       edge        edge        edge        edge        edge'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            '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 h1{
        font-size: 39px;
    }
    
    .tema-principal h2{
        font-size: 21px;
    }
    
    .introducao h3{
        font-size: 28px;
        margin: 4px 16px 0px 20px;
    }
    
    .introducao img{
        max-width: 46px;
        height: 46px;
        margin-left: 10px;
    }
}

@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'
            'tech       tech        tech        tech        tech        tech'
            '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'
            'python     python      python      python      python      python'
            'python     python      python      python      python      python'
            'python     python      python      python      python      python'
            'python     python      python      python      python      python'
            'python     python      python      python      python      python'
            'python     python      python      python      python      python'
            'python     python      python      python      python      python'
            'edge       edge        edge        edge        edge        edge'
            'edge       edge        edge        edge        edge        edge'
            'edge       edge        edge        edge        edge        edge'
            'edge       edge        edge        edge        edge        edge'
            'edge       edge        edge        edge        edge        edge'
            'edge       edge        edge        edge        edge        edge'
            'edge       edge        edge        edge        edge        edge'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            'imagem     imagem      imagem      imagem      imagem      imagem'
            '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: 34px;
    }
    
    .tema-principal h2{
        font-size: 20px;
    }

    .introducao h3{
        font-size: 23px;
        margin: 4px 14px 0px 20px;
    }

    .introducao img{
        max-width: 40px;
        height: 40px;
        margin-left: 8px;
    }
}