@charset "UTF-8"; /*Define o conjunto de caracteres a ser utilizado na exibição do conteúdo de um site*/
@media screen and (min-width: 1150px){
    div.conteudo {
        flex-direction: row;  /*O conteudo do article e do aside serão exibidos lado a lado */
    }
}
@media screen and (min-width: 782px) { /*Define algumas configurações que serão utilizadas em telas a oartir de 782px (tablet e notebook)*/
    #burguer {
        display: none; /*O botão do menu desaparece*/
    }
    menu#itens {
        display: inline-block; /*O menu será exebido por completo*/
    }
    menu > ul > li {
        display: inline-block;
    }

    
    div.icon-section {
        flex-direction: row /*Os cards serão exibidos lado a lado*/
    }
    
}
@media screen and (max-width: 768px) {
  html {
    font-size: 14px; 
  }
}
@media screen and (min-width: 1024px) {
  html {
    font-size: 18px; 
  }
}


/*Fontes importadas*/

@font-face {
    font-family: Garamond;
    src: url(../fonte/EBGaramond-Regular.ttf) format(truetype);
}
@font-face {
    font-family: Roboto;
    src: url(../fonte/Roboto-Regular.ttf) format(truetype);
}


body {
    background-color: #F4F1E3;
    color: #333333;
    font-family: Roboto, sans-serif;
    margin: 0px;
}

header {
    background-color: #246637;
    color: white;
    background-attachment: scroll;
    min-width: 320px;
    position: sticky; /*Define o elemento como fixo*/
    top: 0px; /*Distancia que o elemento ficará do topo da pagina*/
    text-align: start; 
    z-index: 1;
}
header > h1 {
    font-size: clamp(2rem, 3vw, 1.9rem);    
    font-family: 'Times New Roman',  serif;
    display: inline-block; /*O h1 é por padrão um bloco, ao ser definido como inline conseguimos fazer com que o nav fique ao seu lado e não embaixo*/
    margin: 0;
    padding: 20px 15px;
}
menu {
    display: none; /*O menu fica oculto ao não ser que a tela seja maior que 782px*/
    padding: 0;
}
menu ul {
    padding: 0;
    list-style: none; /*tira a bolinha exibida antes dos itens*/
}
menu li {

    padding: 12px 5px;;
    cursor: pointer; /*Muda o estilo do cursor para uma mãozinha*/
}

menu a {  
    color: white;
    text-decoration: none;
    padding-right: 15px;
    font-weight: 700; /*font weight é espessura da fonte, pode ser light normarl bold em bolder ou pode ser definido em escala numérica de 100 a 900*/
    transition-duration: 0.3s; /*Dá um efeito de fade in ao passar o mouse pelo link*/
}
a:hover { /*O dois pontos indica uma pseudo-classe que nesse caso é o hover, todos os eventos definidos abaixo do nav:hover acontecerão enquanto o mouse estiver sobre o nav */
    color: #c4dccb; /*Quando passar o mouse sobre o nav o texto ficará verde*/
    border-radius: 4px;
    font-size: 1.1em;
}

main {
    max-width: 1200px; /*Faz com que o conteúdo não vá do inicio ao fim da tela já que isso dificultaria e leitura em dispositivos grandes como tvs*/
    margin: 0 auto; /*você pode definir a margin de forma diferente para cada lado (ex. margin: 2x 5px 2px 5px) sendo o primeiro número define a margin do top e segue no sentido horario. Nesse caso como top e bottom são 2px e right e left são 2px pode-se simplificar (ex. margin: 2px 5px)*/ 
    padding: 20px;
}
.conteudo {
    display: flex;
    flex-direction: column;/*No mobile o conteudo será exibidos em coluna (article em cima e aside em baixo)*/
    gap: 20px;
    margin: auto;
    border-radius: 14px;
}
main h1 {
    text-align: start;
    font-size: 48px;
    margin: 18px 0px;
    font-family: Garamond ;
}
main h2 {
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);    
    font-family: Garamond;
    font-weight: 700;
}
main h3 {
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    font-family: Garamond;
}
main p {
    line-height: 1.5em; /*1em é igual a 16px que é o tamanho padrão para texto no html, em é mais recomendado pois o tamanho dos pixels pode ser diferente em alguns dispositivos*/
    font-size: 1.125em ;
}
main li {
    line-height: 1.7em; /*Aumenta o espaçamento entre linhas*/
    font-size: 1.125em ;
}

article { 
    background-color: #ffffff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1), 0 1px 10px 0 rgba(0, 0, 0, .1);
    min-width: 320px; /*Evite que o site continue quebrando ao chegas 320px que o menor tamanho que um celular pode ter*/
    max-width: 840px;
    padding: 20px;
    border-radius: 8px;
    
}
aside {
    min-width: 100px;
    max-width: 320px;
}
aside a {
    color:  rgb(70, 67, 58);
    font-weight: bold;
    text-decoration: underline;
    margin: 10px 5px;
    display: block;
}
aside a:hover {
    text-decoration: none;
}
.titulos-aside{
    margin: 7px 3px;
    color: rgb(114, 109, 95);
    font-size: 26px;
    font-family: Garamond;
    font-weight: 600;
}
aside >div.lista-vejamais {
    background-color: rgb(251, 249, 244);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
}

div.extra {
    background-color: rgb(251, 249, 244);
    border: 2px solid rgb(193, 224, 201);
    padding: 10px;
}
.item {
    color:  rgba(70, 67, 58, 0.935);
    font-size: 0.9rem;
    font-weight: bold;
    text-decoration: none;
    margin: 10px 5px;
}
hr {
    margin: 12px 0px;
    border: 1px solid rgb(193, 224, 201);
}
img {
	width: 98%; /*A imagem prencherá 98% da tela, isso que significa que o diminuir o tamanho da tela o tamanho da imagem acompanhará as alterações */
}
footer {
    text-align: center;
}