@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');


:root {
  --font-color: #212529;
  --font-type: "Inter", sans-serif;
  --roxa: #890AB2;
  --size-gg: 100vw;
  --size-g: 900px;
  --size-m: 640px;
}

body {
  font-family: var(--font-type);
  margin: 0;
  padding: 0;
  background-color: #feebd0;
}

h1,
h2 {
  color: #705630;
}

#storytelling > h1 {
  font-size: 5rem;
  font-weight: 800;
  /* margin-bottom: 50px; */
}

#storytelling > h2.type-paragraph {
  margin: 50px auto 30px auto;
  width: 640px;
  text-align: center;
  border-top: 1px solid #b29c7c;
  padding-top: 40px;
}

h1.type-paragraph:nth-child(1) {
  position: absolute;
  z-index: 2;
  margin-top: 75vh;
}

h3.type-paragraph {
  position: absolute;
  z-index: 2;
  /* display: none !important; */
  margin-top: 87vh;
  /* font-weight: 400; */
  width: var(--size-m);
  text-align: center;
  line-height: 2.2rem;
  /* font-style: italic; */
  font-weight: 600;
  font-size: 1.4rem;
}

div#storytelling {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.photo-container {
  max-width: 100%;
  max-height: 100vh;
  overflow: hidden;
  position: relative;
  margin: 29px auto;
}

.photo-container img {
  width: 100%;
  height: auto;
  display: block;
}

.photo-container figcaption {
  margin-top: 8px;
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
  /* background-color: rgba(255, 255, 255, 1); */
  padding: 0.5em;
  box-sizing: border-box;
  text-align: left;

  font-size: 0.9rem;
    color: #000000;
    font-weight: 300;
}

.size-gg.photo-container figcaption {
  margin-top: 8px;
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: fit-content;
  background-color: #705634;
  color: #ffffff;

}

p {
  width: 640px;
  line-height: 1.9rem;
  color: var(--font-color);
  font-weight: 400;
  font-size: 1.15rem;
  margin: 9px auto;
}

/* #storytelling > p:nth-child(4)::first-letter {
  font-size: 4rem;
    font-weight: bold;
    float: left;
    margin: 20px 7px;
} */

p.expediente {
  background-color: #ecdabf;
  font-size: 1rem;
  padding: 30px;
  margin: 40px 0px 50px 0px;
  border-radius: 15px;
}

a {
  color: var(--font-color);
  /* padding-right: 5px; */
  font-weight: 500;
  text-decoration: none; /* Remove o sublinhado padrão */
  border-bottom: 2px solid var(--roxa); /* Adiciona uma borda inferior azul com 1px */
}


.type-html.html.size-gg {
  width: var(--size-gg);
}

.type-html.html.size-g {
  width: var(--size-g);
}

.type-html.html.size-m {
  width: var(--size-m);
}

.type-foto.photo-container.size-gg {
  width: var(--size-gg);
}

.type-foto.photo-container.size-g {
  width: var(--size-g);
}

.type-foto.photo-container.size-m {
  width: var(--size-m);
}

.type-foto.photo-container.imagem-infografico {
  max-height: 100%; /* Defina uma altura máxima para o contêiner */
  overflow: hidden; /* Oculte qualquer conteúdo que ultrapasse a altura máxima */
}

.photo-container.imagem-infografico img {
  width: 100%; /* Garanta que a largura da imagem seja 100% */
  height: auto; /* Permita que a altura seja ajustada proporcionalmente */
  display: block; /* Remova espaços em branco adicionais abaixo da imagem */
  margin: 0 auto; /* Centralize a imagem horizontalmente no contêiner */
}

.photo-container.imagem-infografico figcaption {
  display: none;
}


.type-foto.photo-container.size-g img {
  border-radius: 13px;
}

.type-foto.photo-container.size-m img {
  border-radius: 13px;
}

#storytelling > div.type-foto.photo-container.imagem-capa.size-gg {
  z-index: 1;
  margin: 0;
  margin-bottom: 60px;
}

.photo-container.imagem-capa  {
  width: 100vw; /* Usar 100vw para garantir que a largura seja 100% da viewport */
  height: 100vh;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

.photo-container.imagem-capa img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ajuste para cobrir proporcionalmente o contêiner */
  display: block;
}

.photo-container.imagem-capa figcaption {
  margin-top: 8px;
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0.5em;
  box-sizing: border-box;
  text-align: left;
  color: var(--font-color);
  font-weight: 400;
  font-size: 1.15rem;
}



.imagem-capa img {
  filter: grayscale(0%);
}

.imagem-capa:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgb(255 255 255 / 0%), rgb(224 204 177));
  z-index: 1;
}

.imagem-capa figcaption {
  position: relative;
  z-index: 2;
  color: #fff;
}

.type-html.html {
  margin: 40px 0px;
}



#storytelling > p.expediente > span:nth-child(1) {
  width: 100%;
  display: block;
  font-style: italic;
  border-bottom: 1px solid #b29c7c;
  padding-bottom: 10px;
  margin-bottom: 18px;
}

div.olho {
  width: var(--size-g);
  margin: 30px 0px;
}

.olho > p.texto {
  width: var(--size-g);
  font-size: 2.1rem;
  font-weight: 500;
  line-height: 2.7rem;
  font-style: italic;
}

.olho > p.texto:before {
  content: '"';
  color: #b29c7c;
  font-size: 7rem;
  font-family: cursive;
  position: relative;
  top: 37px;
  left: -23px;
}

.olho > p.autor {
  width: var(--size-g);
  font-size: 1rem;
  font-style: italic;
}



@media (max-width: 940px) {

  h3.type-paragraph {

    width: 90%;
    line-height: 1.6rem;
    font-size: 1.1rem;
    margin-top: 83vh;

}

  #storytelling > h1 {
    font-size: 3rem;
    font-weight: 800;
}

h1.type-paragraph:nth-child(1) {
  position: absolute;
  z-index: 2;
  margin-top: 58vh;
  left: 10px;
  text-align: center;
}

.type-html.html.size-g {
  width: 90%;
}

p {
  width: 90%;
  line-height: 1.8rem;
  font-size: 1rem;
}

#storytelling > h2.type-paragraph {
  margin: 50px auto 30px auto;
  text-align: center;
  width: 90%;
}

.type-foto.photo-container.size-g {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.type-foto.photo-container.size-g img {
  width: 90%;
}

.photo-container img {
  width: 100%;
  height: auto;
  display: block;
}

.photo-container figcaption {

  width: 90%;

}


.type-foto.size-gg.photo-container figcaption {
  margin-top: 8px;
  position: relative;
  bottom: 0;
  left: 10px;
  width: 90%;
  padding: 0.5em;
  box-sizing: border-box;
  text-align: left;
  font-size: 0.8rem;
  color: #000000;
  font-weight: 300;
  background-color: rgba(224, 204, 177, 0);
    /* color: #ffffff; */
}


  p.expediente {
      background-color: #ecdabf;
      width: 80%;
      font-size: 0.9rem;
  }

  div.olho {
    width: 100%;
    margin: 30px 0px;
  }
  
  .olho > p.texto {
    width: 90%;
    font-size: 1.6rem;
    line-height: 1.9rem;

  }
  
  .olho > p.autor {
    width: 90%;
    line-height: 1.4rem;
  }
  
}