@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&family=Source+Sans+Pro:wght@200;300;400&family=Special+Elite&family=Patrick+Hand&display=swap');

* { /* Este seletor escolhe todos os elementos do documento e redefine
    todas as configurações do navegador. */
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: 300;
  vertical-align: baseline;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

body {
    background-color: #fdf5e6; /* Cor de papel antigo */
    background-image: url('https://www.transparenttextures.com/patterns/old-paper.png');
    background-position: center;
    font-family: 'Source Sans Pro', sans-serif;
}

/*configuração do corpo do html*/
      header {
 
        margin: 0;
        padding: 0;
        text-align: center;

        justify-content: space-between;
        align-items: flex-start;
        padding: 20px;



      }

      main {
        max-width: 800px;
        margin: 20px auto;
        padding: 20px;
      }

      article {
        background-color: #fff;
        padding: 30px 40px 30px 60px; /* Espaço para a margem */
        border-left: 1px solid #ffaa9f;
        border-right: 1px solid #ffaa9f;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        position: relative;
      }
      /* Linha vermelha da margem do caderno */
      article::before {
        content: '';
        position: absolute;
        top: 0;
        left: 40px;
        bottom: 0;
        width: 2px;
        background-color: #ff5e5e;
      }

      footer{
        text-align: center;
        margin-top: 55px;
      }
      
      /*configuração das classes*/
      .titulo {
        font-family: 'Special Elite', monospace;
        font-size: 250%;
        color: #333;
        font-weight: normal;
        background-color: #fffacd; /* Fundo amarelo claro (etiqueta) */
        padding: 5px 15px;
        display: inline-block; /* Faz o fundo se ajustar ao texto */
        border-radius: 4px;
        margin-bottom: 10px;
        }
              
        .subtitulo {
        font-family: 'Patrick Hand', cursive;
        font-size: 180%;
        font-weight: normal;
        font-style: italic;
        color: #003d7a; /* Azul escuro */
        }
  
        .paragrafo{
          font-family: 'Caveat', cursive;
          font-size: 180%;
          text-align: justify;
          color: darkblue;
          line-height: 1.6em; /* Espaçamento entre linhas */
        }
        footer .paragrafo {
          text-align: center;
        }
        .paragrafo-lista {
          font-family: 'Source Sans Pro', sans-serif;
          font-size: 120%;
        }
        .tlink, .tlink2, .tlink3, button.tlink {
          font-family: 'Special Elite', monospace;
          font-size: 1.2rem;
          font-weight: normal;
          color: black;
          background-color: white;
          border: 2px solid darkred;
          border-radius: 8px;
          padding: 10px 18px;
          margin: 5px;
          display: inline-block;
          text-align: center;
          transition: all 0.2s ease-in-out;
          text-decoration: none;
          cursor: pointer; /* Adiciona cursor de ponteiro para botões */
        }
        .tlink:hover, .tlink2:hover, .tlink3:hover, button.tlink:hover {
          background-color: darkred;
          color: white;
        }

        /* Espaçamento específico para botões do cabeçalho */
        header nav .tlink {
          margin: 5px 15px;
        }
        
        .lista-mensagens li {
          margin-bottom: 15px;
          border-bottom: 1px dashed #ccc;
          padding-bottom: 10px;
        }

        .btn-delete-discreet {
            background: none;
            border: 1px solid #a94442;
            color: #a94442;
            font-family: Arial, sans-serif;
            font-size: 0.9em;
            cursor: pointer;
            padding: 2px 8px;
            font-weight: bold;
            border-radius: 4px;
            transition: all 0.2s ease-in-out;
        }
        .btn-delete-discreet:hover {
            background: #a94442;
            color: white;
        }

        .imagem-destaque {
          display: block;
          width: 300px;
          height: 300px;
          margin: 0 auto 30px auto; /* Centraliza a imagem e adiciona espaço abaixo */
          border-radius: 15px; /* Cantos mais arredondados */
          border: 2px solid darkred; /* Borda vermelha como os botões */
          box-shadow: 0 4px 12px rgba(0,0,0,0.15);
          background-color: white; /* Fundo branco para a 'margem' */
          padding: 4px; /* Espaçamento que cria a 'margem' branca */
        }
      
        /* Estilos para Busca e Paginação */
        .form-busca {
          margin: 30px 0;
          display: flex;
          gap: 10px;
        }

        .input-busca {
          flex-grow: 1;
          padding: 10px;
          border: 2px solid #ccc;
          border-radius: 8px;
          font-family: 'Source Sans Pro', sans-serif;
          font-size: 1.1rem;
        }

        .btn-busca {
          font-family: 'Special Elite', monospace;
          font-size: 1.2rem;
          font-weight: normal;
          color: black;
          background-color: white;
          border: 2px solid darkred;
          border-radius: 8px;
          padding: 10px 18px;
          cursor: pointer;
          transition: all 0.2s ease-in-out;
        }
        .btn-busca:hover {
          background-color: darkred;
          color: white;
        }

        .paginacao {
          margin-top: 40px;
          text-align: center;
        }

        /* Estilos para o Carrossel */
        #carousel-image {
          width: 100%;
          height: 100%;
          object-fit: cover; /* Garante que a imagem cubra o espaço sem distorcer */
          border-radius: 10px; /* Levemente menor que o container para um bom encaixe */
          transition: opacity 0.5s ease-in-out;
        }

        #carousel-image.fade-out {
            opacity: 0;
        }

  
    /* --- Media Queries para Responsividade --- */

    /* Estilos para Tablets (até 820px) */
    @media (max-width: 820px) {
      main {
        padding: 10px;
        margin: 10px auto;
      }
      .titulo {
        font-size: 200%;
      }
      .subtitulo {
        font-size: 150%;
      }
      .paragrafo {
        font-size: 150%;
      }
      .imagem-destaque {
        width: 250px;
        height: 250px;
      }
    }

    /* Estilos para Celulares (até 600px) */
    @media (max-width: 600px) {
      body {
        font-size: 90%;
      }
      article {
        padding: 25px 20px 25px 30px; /* Reduz padding para telas pequenas */
      }
      article::before {
        left: 15px; /* Aproxima a linha da margem */
      }
      .titulo {
        font-size: 150%;
      }
      .subtitulo {
        font-size: 120%;
      }
      .paragrafo {
        font-size: 130%;
        text-align: left; /* Melhora a leitura em telas pequenas */
      }
      .imagem-destaque {
        width: 90%;
        height: auto;
        aspect-ratio: 1 / 1;
      }
      
      .form-busca {
          flex-direction: column;
      }

      /* Ajusta botões do cabeçalho para empilhar */
      header nav ul li .tlink {
        display: block;
        margin: 8px auto;
      }

      /* Ajusta botões e formulário do rodapé para empilhar */
      footer form,
      footer .tlink,
      footer .tlink2,
      footer .tlink3,
      .paginacao .tlink {
        float: none !important; /* Garante a sobreposição do float */
        display: block;
        margin: 15px auto;
        width: 80%;
        box-sizing: border-box; /* Garante que padding não aumente a largura */
      }
    }