*{
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman';
    color: black;
    margin: auto;

} /*asterisco engloba toda a página, com a fonte de escrita de Georgia e cor preta*/

body {
    text-align: justify;
    margin: auto;
    background-color: white;
    
}  /*o corpo da página (body) ganha a cor de fundo rgb(124,122,128)*/

a:link{
    text-decoration: none;
    color: black;
} /*a:link (todo link da página) recebe decoração de texto vazia (sem sublinhagem e cor azul), cor do texto branco*/

a:visited{
    color: rgb(2, 2, 59);
} /*a:visited (todo link da página após ser visitado) permanecerá com a cor branca*/

a:hover{
    color: red;
} /*a:hover (todo link da página quando passar o mouse por cima) vai receber a cor vermelho pra chamar atenção*/

aside{
    width: 100%;
    text-align: left;
    position: relative;
} /*aside (a parte, de lado abaixo da barra de navegação e área de cabeçalho), recebe uma largura de 90% da página e texto alinhado ao centro*/

aside div{
    position: absolute;
    left: 15%;
    top: 30%;
    font-weight: bold;
    color: black;
    padding: 0.4%;
    text-align: left;
    font-size: 115%;
    display: inline-block;
} /*aside div (área ao lado que corresponde a div) ganha cor rgb(63,58,58), com  espaçamento de 0.4% das bordas, texto alinhado a direita, tamanho da fonte 115% do tamanho padrão HTML, display (mostra essa área) em linha de bloco ao invés de abaixo da imagem img1, aparece ao lado dela*/

.buttonhome{
    background-color: rgb(63, 58, 58);
    font-family: Georgia, Times, 'Times New Roman', serif;
    font-size: 100%;
    text-decoration: none;
    color: white;
    padding: 2%;
    cursor: pointer;
}

img.home{
    width: 100%;
}


.bb{
    font-size: 180%;
}

body h1{
    font-size: 100%;
    width: 70%;
}

body h2{
    text-align: center;
    font-size: 100%;
}

p{
    width: 70%;
}

.nomeg3{
    position: absolute;
    left: 0%;
    top: 0%;
    font-size: 150%;
}

article{
    font-size: 100%;
    width: 70%;
}


footer{
    text-align: justify;
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
    width: 100%;
    padding-bottom: 20%;
    margin-left: 0%;
} 

footer p{
    margin-left: 0%;
}

.esquerda{
    position: absolute;
    margin-bottom: 20%;
    text-align: left;
    margin-left: 2%;
}

.centro{
    position: absolute;
    text-align: left;
    margin-bottom: 20%;
    margin-left: 33%;
}

footer iframe{
    position: absolute;
    margin-bottom: 20%;
    margin-left: 66%;
    width: 30%;
}

.rodape{
    font-size: 70%;
    text-align: center;
} 



@media (max-width: 1339px ){
    footer iframe{
        position: absolute;
        width: 30%;
        margin-left: 60%;
    }

    .rodape{
        text-align: center;
    }
    
} /*@media (max-width: 1339px) {quando o site tiver a máxima largura de 1339px} ele vai modificar as larguras e alguns textos.*/

@media (max-width: 1100px){
    footer p{ 
        text-align: center;
        font-size: 100%;
        padding-bottom: 0%;
    } 

    footer{
        text-align: justify;
        position: relative;
        width: 100%;
        padding-bottom: 0%;
    } 

    .esquerda{
        position: relative;
        margin-bottom: 0%;
        text-align: center;
        margin-left: 0%;
        padding-bottom: 0%;
    }

    .centro{
        position: relative;
        margin-bottom: 0%;
        margin-left: 0%;
        text-align: center;
        padding-bottom: 0%;
    }
    
    footer iframe{
        position: relative;
        margin-left: 0%;
        margin-bottom: 0%;
        margin-top: 5%;
        width: 100%;
        padding-bottom: 0%;
    }
    
    .rodape{
        font-size: 70%;
        text-align: center;
    } 
    
}

@media (max-width: 859px){
    body, html {
        overflow-x: hidden !important;
    }

    aside div{
        position: absolute;
        margin-left: 3%;
        top: 30%;
        font-size: 80%;
    } 

    footer{
        text-align: center;
        padding-bottom: 0%;
        width: 100%;
    } 

    .esquerda{
        position: relative;
        margin-bottom: 0%;
        text-align: center;
        margin-left: 0%;
        padding-bottom: 0%;
    }

    .centro{
        position: relative;
        margin-bottom: 0%;
        margin-left: 0%;
        text-align: center;
        padding-bottom: 0%;
    }
    
    footer iframe{
        position: relative;
        margin-left: 0%;
        text-align: center;
        padding-bottom: 0%;
    }
    
    .rodape{
        font-size: 70%;
        text-align: center;
    } 
    
}

@media (max-width: 717px){   
    body, html {
        overflow-x: hidden !important;
    }

    aside {
        width: 100%;
    }
    
    article{
        width: 95%;
    }

    .bb{
        width: 95%;
    }

    aside div {
        width: 100%;
        margin-left: 0%;
        font-size: 60%;
    }

    .home{
        padding: auto;
    }

}/*@media (max-width: 717px) {quando o site tiver a máxima largura de 717px} ele vai modificar as larguras e alguns textos.*/

@media (max-width: 656px){
    body, html {
        overflow-x: hidden !important;
    }

    aside{
        margin-top: 0px;
    }

    .home{
        margin: 0.1%;
        padding: 0.1%;
        width: 20%;
    }

}/*@media (max-width: 656px) {quando o site tiver a máxima largura de 656px} ele vai modificar as larguras e alguns textos. E na área de navegação .nome vai ficar invisível, junto aos links(buttonn), e no local será adicionado um menu composto por 3 linhas horizontais, das quais quando for clicada, a imagem da barra de navegação (img1) ficará invisível, aparecerá um menu de cor de fundo preta sobre a tela e os links(buttonn) voltarão a ser visíveis porém ocupando uma largura de 100% da página e texto alinhado a direita, nesse menu a rolagem ficará impossibilitada a menos que o usuário feche o menu ou clique em algum botão dele*/

@media (max-width: 520px){
    body, html {
        overflow-x: hidden !important;
    }

    aside img{
        width: 100%;
    }
    article{
        font-size: 80%;
    }

    .bb{
        font-size: 80%;
    }
}/*@media (max-width: 520px) {quando o site tiver a máxima largura de 520px} ele vai modificar as larguras e alguns textos. E na área de navegação .nome vai ficar invisível, junto aos links(buttonn), e no local será adicionado um menu composto por 3 linhas horizontais, das quais quando for clicada, a imagem da barra de navegação (img1) ficará invisível, aparecerá um menu de cor de fundo preta sobre a tela e os links(buttonn) voltarão a ser visíveis porém ocupando uma largura de 100% da página e texto alinhado a direita, nesse menu a rolagem ficará impossibilitada a menos que o usuário feche o menu ou clique em algum botão dele*/

@media (max-width: 404px) {
    body, html {
        overflow-x: hidden !important;
    }

    article{
        font-size: 80%;
    }

    .bb{
        font-size: 80%;
    }
    
    aside img{
        width: 100%;
    } 

    aside{
        width: 100%;
        text-align: left;
        position: relative;
    } 

    .nomeg3{
        position: absolute;
        left: 0%;
        top: 0%;
        font-size: 100%;
    }

    .buttonhome{
        width: 50%;
        padding: 0.5%;
        margin-top: 4%;
    }
    
    aside div{
        position: absolute;
        left: 3%;
        top: 20%;
        font-weight: bold;
        color: black;
        padding: 0.4%;
        text-align: left;
        font-size: 50%;
        display: inline-block;
        width: 40%;
    } 

    footer h2{
        font-size: 85%;
    }

    footer p{
        font-size: 75%;
        text-align: center;
        width: 100%;
    }
}/*@media (max-width: 404px) {quando o site tiver a máxima largura de 404px} ele vai modificar as larguras e alguns textos. E na área de navegação .nome vai ficar invisível, junto aos links(buttonn), e no local será adicionado um menu composto por 3 linhas horizontais, das quais quando for clicada, a imagem da barra de navegação (img1) ficará invisível, aparecerá um menu de cor de fundo preta sobre a tela e os links(buttonn) voltarão a ser visíveis porém ocupando uma largura de 100% da página e texto alinhado a direita, nesse menu a rolagem ficará impossibilitada a menos que o usuário feche o menu ou clique em algum botão dele*/

@media (max-width: 300px){
    aside div{
        position: absolute;
        left: 3%;
        top: 0%;
        padding: 0.1%;
        text-align: left;
        font-size: 58%;
        display: inline-block;
        width: 50%;
    } 

    .buttonhome{
        margin-top: 0%;
    }

}

@media (max-width: 250px){
    aside div{
        display: none;
    } 
}