/* ==============================
   DANIELLA FÉDER
   meu tudoOOO na internet
   ============================== */


/* ==============================
   CORES PRINCIPAIS
   ============================== */

:root {
  --fundo: #111111;
  --caixa: #1c1c1c;
  --texto: skyblue;
  --destaque: aqua;
  --borda: deeppink;
}


h1 {
  color: yellow;
}


h2 {
  color: magenta;
}


h3 {
  color: cyan;
}


/* ==============================
   PÁGINA
   ============================== */

body {
  background-color: var(--fundo);
  color: var(--texto);

  font-family: Verdana, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;

  margin: 0;
}


/* ==============================
   CABEÇALHO
   ============================== */

header {
  width: 760px;
  max-width: 90%;

  margin: 30px auto 10px auto;

  text-align: center;
}


header h1 {
  margin-bottom: 0;

  font-size: 32px;
}


.subtitulo {
  margin-top: 0;

  font-size: 12px;

  color: gold;

  letter-spacing: 3px;
}


/* ==============================
   MENU
   ============================== */

nav {
  width: 760px;
  max-width: 90%;

  margin: 20px auto;

  padding: 8px;

  border: 1px solid var(--borda);

  text-align: center;

  background: var(--caixa);
}


nav a {
  color: var(--texto);

  margin: 0 8px;

  text-decoration: none;
}


nav a:hover {
  color: var(--destaque);

  text-decoration: underline;
}


/* ==============================
   CONTEÚDO
   ============================== */

main {
  width: 760px;
  max-width: 90%;

  margin: auto;
}


/* ==============================
   JANELINHAS
   ============================== */

.janela {
  background: var(--caixa);

  border: 1px solid var(--borda);

  padding: 20px;

  margin-bottom: 20px;
}


.janela h2 {
  margin-top: 0;

  border-bottom: 1px dotted var(--borda);

  padding-bottom: 5px;
}


/* ==============================
   FOTO
   ============================== */

.foto-perfil {
  width: 180px;
  max-width: 100%;

  float: left;

  margin: 0 20px 10px 0;

  border: 1px solid var(--borda);
}


/* Evita que a foto saia da caixa */

.apresentacao::after {
  content: "";

  display: block;

  clear: both;
}


/* ==============================
   LINKS
   ============================== */

a {
  color: lime;
}


a:hover {
  color: pink;
}


/* ==============================
   LIVROS
   ============================== */

.livro {
  display: flex;

  gap: 20px;

  align-items: flex-start;
}


.livro img {
  width: 120px;

  border: 1px solid var(--borda);
}


/* ==============================
   POEMA
   ============================== */

blockquote {
  font-family: Georgia, serif;

  font-style: italic;

  margin: 20px;
}


/* ==============================
   RODAPÉ
   ============================== */

footer {
  width: 760px;
  max-width: 90%;

  margin: 40px auto;

  text-align: center;

  font-size: 11px;

  color: aqua;
}


/* ==============================
   CELULAR - GERAL
   ============================== */

@media (max-width: 600px) {

  .foto-perfil {
    float: none;

    display: block;

    margin: 0 auto 20px auto;
  }


  .livro {
    display: block;
  }


  nav a {
    display: inline-block;

    margin: 4px 6px;
  }

}


/* ==============================
   PÁGINA SOBRE
   ============================== */


/* CAMINHO DA PRODUÇÃO ARTÍSTICA */

.caminho-artistico {
  font-family: Georgia, serif;

  text-align: center;

  font-style: italic;

  font-size: 16px;

  color: yellow;

  margin: 25px 0;
}


/* TIMELINE */

.linha-do-tempo {
  margin-top: 20px;

  border-left: 1px dotted var(--borda);

  padding-left: 20px;
}


.evento {
  margin-bottom: 25px;
}


.evento:last-child {
  margin-bottom: 0;
}


.ano {
  color: deeppink;

  font-weight: bold;

  font-family: monospace;
}


.evento p {
  margin-top: 3px;
}


/* BIO PARA DIVULGAÇÃO */

.bio-divulgacao {
  border: 1px dashed var(--borda);

  padding: 15px;

  background-color: #151515;

  font-family: Georgia, serif;
}


.observacao {
  font-size: 11px;

  color: yellow;
}


/* ==============================
   BOTÕES
   ============================== */

.botoes {
  margin-top: 20px;
}


.botao {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  box-sizing: border-box;

  height: 36px;

  border: 1px solid var(--borda);

  background-color: #111111;

  padding: 0 12px;

  margin: 5px 5px 5px 0;

  color: lime;

  text-decoration: none;

  font-family: monospace;

  font-size: 14px;

  line-height: 1;

  vertical-align: middle;
}


.botao:hover {
  background-color: #333333;

  color: pink;

  text-decoration: none;
}


button.botao {
  appearance: none;

  -webkit-appearance: none;

  cursor: pointer;
}


/* ==============================
   PÁGINA LIVROS
   ============================== */

.livro-detalhe {
  display: flex;

  gap: 30px;

  align-items: flex-start;
}


/* CAPA */

.capa-livro {
  flex-shrink: 0;
}


.capa-livro img {
  width: 180px;

  max-width: 100%;

  border: 1px solid var(--borda);
}


/* INFORMAÇÕES */

.info-livro {
  flex: 1;
}


.info-livro h2 {
  margin-top: 0;
}


.dados-livro {
  font-family: monospace;

  font-size: 12px;

  color: yellow;

  text-transform: lowercase;
}


/* ==============================
   ANTOLOGIAS
   ============================== */

.subtitulo-secao {
  margin-top: 30px;

  padding-bottom: 5px;

  border-bottom: 1px dotted var(--borda);

  font-family: monospace;

  font-size: 14px;

  color: cyan;

  text-transform: lowercase;
}


/* CADA ANTOLOGIA */

.antologia {
  display: flex;

  gap: 20px;

  align-items: flex-start;

  padding: 20px 0;

  border-bottom: 1px dotted var(--borda);
}


.antologia:last-child {
  border-bottom: none;
}


/* CAPA */

.capa-antologia {
  flex-shrink: 0;
}


.capa-antologia img {
  width: 180px;

  max-width: 100%;

  border: 1px solid var(--borda);
}


/* INFORMAÇÕES */

.info-antologia {
  flex: 1;
}


.info-antologia h3 {
  margin-top: 0;

  margin-bottom: 5px;
}


/* ==============================
   POP-UP DOS POEMAS
   ============================== */

.popup {
  display: none;

  position: fixed;

  z-index: 1000;

  left: 0;
  top: 0;

  width: 100%;
  height: 100%;

  overflow: auto;

  background-color: rgba(0, 0, 0, 0.85);
}


/* JANELA */

.popup-conteudo {
  position: relative;

  width: 500px;
  max-width: 80%;

  margin: 60px auto;

  padding: 30px;

  background-color: var(--caixa);

  border: 1px solid var(--borda);

  color: var(--texto);
}


/* TÍTULO */

.popup-conteudo h2 {
  margin-top: 0;

  padding-bottom: 8px;

  border-bottom: 1px dotted var(--borda);
}


/* AUTORIA */

.credito-poema {
  font-family: monospace;

  font-size: 12px;

  color: plum;
}


/* TEXTO DO POEMA */

.texto-poema {
  margin: 30px 0;

  font-family: Georgia, serif;

  font-size: 16px;

  line-height: 1.8;
}


.texto-poema p {
  margin-bottom: 25px;
}


/* REFERÊNCIA */

.publicado-em {
  margin-top: 30px;

  padding-top: 10px;

  border-top: 1px dotted var(--borda);

  font-size: 11px;

  color: plum;
}


/* X PARA FECHAR */

.fechar {
  position: absolute;

  top: 8px;
  right: 12px;

  border: none;

  background: none;

  color: cyan;

  font-family: monospace;

  font-size: 25px;

  cursor: pointer;
}


.fechar:hover {
  color: blue;
}


/* CELULAR - POP-UP POEMAS */

@media (max-width: 600px) {

  .popup-conteudo {
    width: auto;

    max-width: none;

    margin: 25px;

    padding: 25px;
  }

}


/* ==============================
   POP-UP DOS VÍDEOS
   ============================== */

.popup-video {
  display: none;

  position: fixed;

  z-index: 1000;

  left: 0;
  top: 0;

  width: 100%;
  height: 100%;

  overflow: auto;

  background-color: rgba(0, 0, 0, 0.9);
}


/* JANELA DO VÍDEO */

.popup-video-conteudo {
  position: relative;

  width: 360px;
  max-width: 80%;

  margin: 30px auto;

  padding: 25px;

  background-color: var(--caixa);

  border: 1px solid var(--borda);
}


/* VÍDEO VERTICAL */

.popup-video iframe {
  display: block;

  width: 100%;

  aspect-ratio: 9 / 16;

  border: 0;
}


/* CELULAR - POP-UP DOS VÍDEOS */

@media (max-width: 600px) {

  .popup-video-conteudo {
    width: auto;

    max-width: none;

    margin: 20px;

    padding: 20px;
  }

}

/* ==============================
   PUBLICAÇÃO FUTURA
   ============================== */

.futura {
  opacity: 0.8;
}


.status {
  color: magenta;

  display: inline-block;

  padding: 3px 7px;

  border: 1px dashed var(--borda);

  font-family: monospace;

  font-size: 11px;
}


/* CELULAR - ANTOLOGIAS */

@media (max-width: 600px) {

  .antologia {
    display: flex;

    gap: 15px;
  }


  .capa-antologia img {
    width: 80px;
  }

}


/* ==============================
   PROJETOS AINDA NÃO PUBLICADOS
   ============================== */

.projeto-livro {
  border-bottom: 1px dotted var(--borda);

  padding: 10px 0 20px 0;

  margin-bottom: 15px;
}


.projeto-livro:last-child {
  border-bottom: none;

  margin-bottom: 0;
}


.projeto-livro h3 {
  margin-bottom: 0;
}


/* CELULAR - LIVROS */

@media (max-width: 600px) {

  .livro-detalhe {
    display: block;
  }


  .capa-livro {
    text-align: center;

    margin-bottom: 20px;
  }

}


/* ==============================
   PÁGINA ARTE
   ============================== */


/* SÉRIES */

.serie-arte {
  margin: 25px 0 40px 0;
}


.cabecalho-serie {
  margin-bottom: 20px;
}


.cabecalho-serie h3 {
  margin-bottom: 5px;
}


/* DADOS TÉCNICOS */

.dados-obra {
  font-family: monospace;

  font-size: 12px;

  color: yellow;
}


/* GALERIA */

.galeria-arte {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;

  margin-top: 20px;
}


/* CADA OBRA */

.galeria-arte figure {
  margin: 0;
}


.galeria-arte img {
  display: block;

  width: 250px;

  object-fit: cover;

  border: 1px solid var(--borda);
}


/* LEGENDA */

.galeria-arte figcaption {
  margin-top: 8px;

  font-size: 11px;

  line-height: 1.5;

  color: lime;
}


.galeria-arte figcaption strong {
  color: var(--texto);

  font-size: 12px;
}





/* ==============================
   EXPOSIÇÕES
   ============================== */

.exposicao {
  display: flex;

  gap: 20px;

  padding: 18px 0;

  border-bottom: 1px dotted var(--borda);
}


.exposicao:last-child {
  border-bottom: none;
}


.exposicao .ano {
  width: 45px;

  flex-shrink: 0;
}


.info-exposicao h3 {
  margin: 0 0 5px 0;
}


.info-exposicao p {
  margin: 4px 0;
}


/* ==============================
   SÉRIES EM PROCESSO
   ============================== */

.serie-processo {
  margin-top: 25px;

  padding-top: 10px;
}


.serie-processo h3 {
  margin-bottom: 5px;
}


/* CELULAR - GALERIA */

@media (max-width: 600px) {

  .galeria-arte {
    grid-template-columns: repeat(2, 1fr);

    gap: 12px;
  }


  .galeria-arte img {
    height: 180px;
  }

}


/* ==============================
   POP-UP DAS OBRAS
   ============================== */

.popup-obra {
  display: none;

  position: fixed;

  z-index: 1000;

  left: 0;
  top: 0;

  width: 100%;
  height: 100%;

  overflow: auto;

  background-color: rgba(0, 0, 0, 0.9);
}


/* JANELA DO POP-UP */

.popup-obra-conteudo {
  position: relative;

  display: grid;

  grid-template-columns: 1.4fr 1fr;

  gap: 30px;

  width: 900px;
  max-width: 85%;

  margin: 40px auto;

  padding: 30px;

  background-color: var(--caixa);

  border: 1px solid var(--borda);

  color: var(--texto);
}


/* IMAGEM GRANDE */

.popup-obra-imagem img {
  display: block;

  width: 100%;

  height: auto;

  max-height: 75vh;

  object-fit: contain;
}


/* INFORMAÇÕES */

.popup-obra-info h2 {
  margin-top: 0;
}


.descricao-obra {
  margin: 25px 0;

  line-height: 1.7;
}


.acervo-obra {
  margin-top: 25px;

  padding-top: 10px;

  border-top: 1px dotted var(--borda);

  font-size: 11px;

  color: deeppink;
}


/* CELULAR - POP-UP DAS OBRAS */

@media (max-width: 600px) {

  .popup-obra-conteudo {
    display: block;

    width: auto;

    max-width: none;

    margin: 20px;

    padding: 20px;
  }


  .popup-obra-info {
    margin-top: 25px;
  }

}


/* ==============================
   PÁGINA POESIA
   ============================== */


/* POEMA ASSOCIADO A UMA OBRA */

.poema-visual {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 35px;

  align-items: start;

  padding: 25px 0;

  border-bottom: 1px dotted var(--borda);
}


.poema-visual:last-child {
  border-bottom: none;
}


/* IMAGEM DA OBRA */

.imagem-poema img {
  display: block;

  width: 100%;

  height: auto;

  border: 1px solid var(--borda);
}


/* POEMA */

.poema-pagina h3 {
  margin-top: 0;
}


.poema-pagina .texto-poema {
  margin-top: 25px;
}


/* INFORMAÇÃO SOBRE A OBRA */

.referencia-obra {
  margin-top: 30px;

  padding-top: 10px;

  border-top: 1px dotted var(--borda);

  font-size: 11px;

  color: lime;
}


/* POEMAS SEM OBRA VISUAL */

.poema-solo {
  width: 500px;

  max-width: 100%;

  margin: 30px auto;

  padding-bottom: 30px;

  border-bottom: 1px dotted var(--borda);
}


.poema-solo:last-child {
  border-bottom: none;
}


.poema-solo h3 {
  margin-bottom: 25px;
}


/* CELULAR - POESIA */

@media (max-width: 600px) {

  .poema-visual {
    grid-template-columns: 1fr;

    gap: 20px;
  }

}


/* ==============================
   PÁGINA IMPRENSA
   ============================== */

.foto-imprensa {
  display: flex;
  gap: 25px;
  align-items: flex-start;
  margin-top: 20px;
}

.foto-imprensa img {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--borda);
}

.info-foto-imprensa {
  flex: 1;
}

.info-foto-imprensa h3 {
  margin-top: 0;
}

.em-breve {
  margin-top: 25px;
  font-family: monospace;
  color: magenta;
}


/* CELULAR */

@media (max-width: 600px) {

  .foto-imprensa {
    display: block;
  }

  .foto-imprensa img {
    width: 100%;
    margin-bottom: 20px;
  }

}