body {
   background-image: url('../imgs/sheena-article/japan-90.jpeg');
   font-size: 19px;
   text-align: justify;
   position: relative;
   color: #222; /* Preto mais suave para o texto geral */
 }

 body::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(245, 245, 220, 0.3); /* Bege claro semi-transparente para o fundo */
   z-index: -1; /* Coloca atrás do conteúdo */
 }

 .navbar {
   margin: auto;
   font-size: 19px;
   margin-bottom: 10px;
   text-decoration-line: none;
   display: flex;
   width: fit-content;
   border: 5px solid #e6b800; /* Amarelo/Dourado para a borda da navbar */
   justify-content: center;
   padding: 10px;
   background: #f0e68c; /* Amarelo claro para o fundo da navbar */
 }

 .container {
   max-width: 1250px;
    border: 3px solid #222;
    border-radius: 20px;
    width: 70%;
    margin: auto;
    background-color: #4e9c887a;
    padding: 30px;
 }

 .header {
  font-size: larger;
   padding: 15px;
   background-image: url('../imgs/sheena-article/sheena-cover01.jpg');
   color: white;
       background-position-x: center;
    background-position-y: center;
    margin: 35px;
    border: 5px solid black;
 }

 .header p {
   font-family: "Roboto Mono", monospace;
   font-optical-sizing: auto;
   font-weight: 300;
   font-style: normal;
   color: white; /* Cinza mais escuro para o texto do header */
   text-align: center;
   
 }

 h1 {
    text-align: center;
    margin: auto;
    padding: 50px;
    width: 80%;
    transform: scaleY(1.5);
    font-size: ;
    text-shadow: 2px 1px 1px #f2f2f2, 0 0 3em #f6b2b2, 0 0 0.4em #a1b39f;

 }

.subtitulo{
  text-align: center;

    width: fit-content;
    border-bottom: 2px solid #e6b800;
    padding: 16px;
    margin: auto;
}

 h2 {

    border-bottom: 2px solid #e6b800;
    padding: 16px;
    width: fit-content;
 }

 h3 {
    color: #0a0000;
    border-right: 3px solid black;
    background: #6889a391;
    padding: 5px;
    width: fit-content;
    font-style: italic;
 }
 
 h4{
   margin: 0px;
    padding: 10px;
  font-size: 25px;
    color: #000000;
    background: #ffde6c;
    text-shadow: 2px 1px 4px orange;
    text-align: center;
 }
 
 a{
   text-decoration-color: #c7c7c7;
    color: green;
    text-shadow: 1px 1px 5px #3bdf3b;
 }

 .text {
   font-family: "Roboto Mono", monospace;
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;
   background: #fcfcfc; /* Branco para o fundo do texto */
   color: #333; /* Preto para o texto do artigo */
   padding: 30px;
 }

.natalidade{
  width: 90%;
    margin: auto;
    display: flex;
}

.estilo-raca{
      width: 90%;
    display: flex;
    margin: auto;
}

 .notas {
   border: 2px solid #a9a9a9; /* Borda cinza para as notas */
   color: #333; /* Preto para o texto das notas */
   font-size: 22px;
   margin-top: 25px;
   background-color: #f0f0f0; /* Cinza claro para o fundo das notas */
   padding: 20px;
 }

 footer {
   background-color: #4e9c887a;; /* Bege para o fundo do footer */
   width: 70%;
   padding: 15px;
   font-size: 25px;
   color: #333; /* Preto para o texto do footer */
   margin: auto;
   justify-content: center;
   display: flex;
 }


.collapsible {
  background-color: antiquewhite;;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: bold;
  /* Adiciona uma transição suave para a mudança de cor */
  transition: background-color 0.4s ease;
}

/* Efeito de hover e quando o botão está ativo */
.active, .collapsible:hover {
  background-color: #ffcf90;
  color: black;
}

/* Estilo do conteúdo sanfona */
.content {
  padding: 0 18px;
  background-color: #ffeed3;
  overflow: hidden; /* Essencial para esconder o conteúdo que ultrapassa o max-height */
  
  /* Estado inicial "fechado" */
  max-height: 0; 
  
  /* A MÁGICA DA ANIMAÇÃO */
  transition: max-height 0.4s ease-out; 
  
  /* Mantemos o flex, pois ele será controlado pela altura */
  display: flex;
  flex-direction: column;
}

.img-site-text{
  display: flex; 
  align-content: center; 
  flex-direction: row; 
  align-items: center;
  width: 100%;
}

.sheena-rage{
  margin: 25px;
    border: 3px solid black;
    border-radius: 50%;
 width: 40%;
 transition: border 0.1s ease;
}

.sheena-rage:hover{
  border: 5px solid #003cff;
}

.sheena-portraits{
    align-self: flex-start;
    height: 400px;
    margin: 0px 25px;
    border: 2px solid black;
  }
  
  .sheena-jump{
    align-self: center;
    height: 500px;
    transform: rotateY(180deg);
    width: fit-content;
    margin: 0px 25px;
    border: 2px solid black;
  }
.content-purple {
  padding: 0 18px;
  background-color: #ffeed3;
  overflow: hidden; /* Essencial para esconder o conteúdo que ultrapassa o max-height */
  
  /* Estado inicial "fechado" */
  max-height: 0; 
  
  /* A MÁGICA DA ANIMAÇÃO */
  transition: max-height 0.4s ease-out; 
  
  /* Mantemos o flex, pois ele será controlado pela altura */
  display: flex;
  flex-direction: column;
  position: relative; /* Essencial! Torna este div a referência para o nosso pseudo-elemento */
  z-index: 1;         /* Garante que este container tenha seu próprio contexto de empilhamento */
  
  /* Adicione um fundo se quiser, ou deixe transparente */
}

/* PASSO 2: Garantir que o texto (e outros conteúdos) fique na frente */
.content-purple p { /* O '*' seleciona todos os filhos diretos (como o <p>) */
  position: relative; /* Faz com que o conteúdo também participe do empilhamento */
  z-index: 2;         /* Coloca o conteúdo em uma camada ACIMA da imagem */
}

/* PASSO 3: Criar a camada da imagem por trás do texto */
.content-purple::before {
    content: '';
    position: absolute;
    z-index: 1;
    background-image: url(../../imgs/sheena-article/sheena-purple.jpg);
    background-size: cover;
    width: 600px;
    height: 100%;
    top: 0px;
    left: 65%;
    opacity: 0.5;
}

.imgs-instinct{
  display:flex;
  justify-content: center;
  margin:auto;
}

.imgs-instinct img{
    width: 400px;
    margin: 20px;
}


 .navegacao-textos {
   color: #333; /* Preto para o texto de navegação */
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 20px 0;
   margin-top: 40px;
   border-top: 3px solid #a9a9a9; /* Borda cinza para a navegação */
   width: 70%;
   margin-left: auto;
   margin-right: auto;
 }

 .nav-link,
 .nav-download {
   color: #006400; /* Verde escuro para links */
   text-decoration: none;
   background-color: #f0e68c; /* Amarelo claro para o fundo dos links */
   font-weight: bold;
   padding: 10px 15px;
   border: 1px solid transparent;
   border-radius: 8px;
   transition: all 0.3s ease;
 }

 .nav-link:hover,
 .nav-download:hover {
   background-color: #008000; /* Verde para o hover dos links */
   color: white;
   border-color: #ddd;
 }

 .nav-download {
   background-color: #a0522d; /* Marrom para o botão de download (pode ser ajustado) */
   color: white;
 }

 .nav-download:hover {
   background-color: #ff8c00; /* Laranja para o hover do download (pode ser ajustado) */
   color: #333;
   border-color: transparent;
 }

 /* Classe para esconder os botões de início/fim da lista */
 .nav-link.hidden {
   visibility: hidden;
   pointer-events: none;
 }

 @media (max-width: 768px) {
   .navbar_textos {
     width: fit-content;
   }

   .navbar_textos a {
     font-size: 16px;
     padding: 5px;
   }

   body {
     text-align: left;
     width: 100%;
   }

   .data {
     font-size: 13px;
     padding: 5px;
   }

   .container {
     display: flex;
     flex-direction: column;
     width: 80%;
     border: 3px solid gray;
     border-radius: 20px;
     max-width: 100%;
     margin: auto;
    background-color: #4e9c887a;
    padding: 10px;
   }

   .text {
     font-size: 19px;
   }
   
   .header{
     display: flex;
     flex-direction: column;
     margin: 20px auto;
    width: 80%;
    font-size:  15px;
   }
  
  .img-site-text{
    margin: auto;
    flex-direction:column;
  }
  
  .sheena-portraits{
    width: 100%;
    height: auto; /* 2. A altura se ajusta para não distorcer a imagem */
    margin: 0;
    border: none;
  }
  .sheena-jump{
    width: 100%;
    height: auto; /* 2. A altura se ajusta para não distorcer a imagem */
    margin: 0;
    border: none;
  }
  
  
  .sheena-rage{
    margin: 0px;
    width: 400px;
    border-radius: 0px;
    padding: 0px;
    
  }
  .natalidade{
    width: 100%;
    margin: auto;
    justify-content: center;
  }
  
   h1{
    font-size: 22px;
    padding: 15px;
    margin: 10px;
     text-shadow: none;
   }

    
   h2 {
     font-size: 15px; /* Ajusta o tamanho do h2 em telas menores */
   }

   h3 {
     font-size: 1em; /* Ajusta o tamanho do h3 em telas menores */
   }
   
   .imgs-instinct{
     flex-direction: column;
   }
   
   .imgs-instinct img{
    width: 200px;
    height: auto; /* 2. A altura se ajusta para não distorcer a imagem */
    margin: 10px auto;
    border: none;
  }
   
    
 }