@charset "UTF-8";

@import url(variaveis.css);

/* ASTERISCO * SELETOR UNIVERSAL*/
*{
    margin: 0;
    padding: 0;
}

body{
    font-family: Arial, Helvetica, sans-serif;
    height: 100%; /*Ocupar toda tela*/
    width: 100%;
    margin: 0;
}

/*Cobrir toda a Tela*/
header, footer{
    left: 0;
    right: 0;
    width: 100%;
    
}

/* HEADER */
header{
    background-color: var(--verde-militar); /* var(--verde-militar) */
    top: 0;
    position: fixed; /*Vai junto quando for para baixo*/
    height: 60px; /*Tamanho que parece razoável*/
    margin:0; 
    box-shadow: 1px 1px 3px #0000006c;
    z-index: 10; /*Fica em cima de tudo*/
}


nav{
    margin: 0;
}
nav a{
    display: flex;
    text-decoration: none; /*Tira o sublinhado*/
}

nav > ul{
    background-color: var(--roxo-nobreza);
    list-style: none; /*Tira os pontos*/
    margin: 0; /*Tira a margem*/
    gap: 5px; /*Espaçamento entre os LIS, os botões*/
    flex-direction: column; /*Faz ficar em coluna*/


}
nav > ul > li{
    height: 100%;
    border-radius: 5px;
}


.menu{
    display: flex; /*Ficarem em linha reta*/
}

.headeraltura{
    height: 60px; /*Tamanho que parece razoável*/
}

/* --- Botões gerais --- */
.botao-nav{
    padding: 10px;
    border-radius: 5px;
    font-size: 20px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
    background-color: var(--roxo-nobreza);
    color: #9e6f29;
    box-shadow: 1px 1px 3px var(--roxo-nobreza)8a;
    gap: 10px; /*Espaço entre o ícone do botão e o texto*/
}

.botao-nav:hover, .botao-nav:focus {
    background-color: #846094;
    outline: none;
}



/* ☰ = hamburguer */
#hamburguer{
    font-size: 200%;
    color: var(--marrom-titulos);
    padding: 0px 10px; /*espaço para nao ficar coladona esquerda*/
    background-color: #6c7240a2;
    border: 0;
   
}
#hamburguer:visited{
    text-decoration: none;
}

#hamburguer:active{
    text-decoration: none;
    color: var(--marrom-titulos);
}

#hamburguer:hover{
    color: #9e6f29
}

#headergeral{
    height: 60px; /*Tamanho que parece razoável*/
    display: flex; /*Ficarem em linha reta*/

}

/* aparecer ao clicar */
.nav-principal ul {
    display: none;
    flex-direction: column;      /* itens empilhados*/
    background-color: #6c7240;  
    position: absolute; /*realmente ficar na posição q precisa*/          
    top: 100%;                   
    left: 0em;                  
    padding: 15px;                
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); 
    z-index: 999;                /* sobrepor elementos */
}

.nav-principal ul.show {
        display: flex; /*menu visivel qnd .show for ativada*/
}

.botao-nav {
    white-space: nowrap; /* texto n quebra duas linhas */
}



#headerlogotitulo{
    width: 100%; /*Tam do logo + titulo (um pouco mais)*/
    padding: 0 0 0 1.5%;
    display: flex ; /*Já vai ficando na mesma linha*/
    align-items: center; /*Alinha no meio*/
}

#tituloheader{
    font-family:  var(--fonte-medieval);
    font-size: 175% ;
    color: var(--marrom-titulos);
    text-shadow: 1px 1px 1px #4b3621d5;
    width: 100%;
    margin: 0px 2%; 
    padding: 0;
    max-width: fit-content;
}


.logosite{
    background-image: url(./logo2.png);
    background-position: center; /*Centraliza imagem*/
    background-size: cover; /*Cobrir todo o espaço*/
    height: 35px;
    width: 42px; /*Proporção com regra de três*/
    display: flex; /*Faz virar flexível*/
    background-repeat: no-repeat; /*Não repete a imagem no fundo*/
    margin: 5.0px 0; /*Para a height chegar em 65 igual do header e alinhar no meio*/
    flex-shrink: 0; /*NÃO DEIXA ENCOLHER O ABENÇOADO!
    controla a capacidade de encolher do elemento flexível quando o espaço disponível é menor que o tamanho do conteúdo.
    Se o valor for 0, o elemento não encolhe. Se for 1, ele encolhe proporcionalmente ao tamanho do conteúdo. */

}
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}




#espacoentre{
    height: 90px;
}


/*CORES DE Hs*/
.historia{
    color: #3C4E59;
}
.poema{
    color: var(--verde-militar);
}
.carta{
    color: #A0522D;
}

/*Extras*/
main p {
    text-align: justify; /*Justifica o texto*/
}

a{
    text-decoration: none; /*Tira o sublinhado*/
}
a:visited{
    text-decoration: none; /*Tira o sublinhado*/
}

/*Footer*/

footer{
    background-color: var(--roxo-nobreza);
    bottom:0;
    height: 150px;
    width: 100%;
    margin: 2.5em 0em 0em 0em;
    box-shadow: -1px -1px 3px #0000006c;
}

#footergeral{
    height: 150px;
    width: 100%;
    display: block; /*box*/
    /*align-items: center; Alinha no meio verticalmente 
    justify-content: center; Alinha no meio*/ 
}

footer p{ /*o espaço é para aplicar nos P que tão no FOOTER*/
    font-size: 18px;
    color: var(--dourado);
    margin: 0;
    text-indent: 2px;
}

#footerconteudo{
    display: flex; /*Faz virar flexível*/
    flex-direction: column; /*Faz ficar em coluna*/
    gap: 15px; /*Espaçamento entre os elementos*/
    width: 96.5%;
    height: 130px;
    padding-left: 15px;
    padding-top: 15px;

}

#footerdireitos{
    width: 100%;
    height: auto; /*TAMANHO AUTOMATICO DE ACORDO COM O TEXTO ;]*/
}
#footerico{
    width: 100%;
    height: 50px;
    display: flex; /*Faz virar flexível*/
    flex-direction: row; /*Faz ficar em linha*/
    align-items: center; /*Alinha no meio vertical*/
    justify-content: center; /*Alinha no meio horizontal*/
    gap: 5px; /*Espaçamento entre os elementos*/    
}

#icoautor{
    background-image: url(./autor.png);
    background-repeat: no-repeat; /*Não repete a imagem no fundo*/
    background-size: cover;
    display: flex; /*Faz virar flexível*/
    height: 35px;
    width: 35px; 
    border-radius: 50%;
    
}
/*Não poder copiar o texto*/
.no-copy {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

@media only screen and (min-width:1024px){
     
    #tituloheader{
        font-size: 300%;
        margin: 0px 1%;
    }   
    .logosite{
        height: 50px;
        width: 58px;
    }
    main p{
        line-height: 2em;
        text-indent: 10%;
    }

}

.adsense-box {
  width: 90%;          /* pega 80% da largura do elemento pai */
  margin: 20px auto;   /* centraliza horizontalmente */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
  background-color: #fff;
  text-align: center;
  box-sizing: border-box; /* importante para considerar padding dentro da largura */
  height: fit-content;
}