body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f8f9fa;
        }

    header {
            background: #f8f9fa;
            padding: 10px 20px;
            text-align: center;
        }
        a {
        text-decoration: none; /* Remove o sublinhado */
        color: #007bff; /* Cor azul padrão */
        font-weight: bold; /* Deixa o texto em negrito */
        }

        a:hover {
            color: #551a8b; /* Altera a cor ao passar o mouse */
            text-decoration: underline; /* Adiciona sublinhado ao passar o mouse */
        }

        a:visited {
            color: #551a8b; /* Cor para links já visitados */
        }

        /* Barra de navegação */
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #f8f9fa;
            padding: 15px 20px;
        }

        /* Logo e nome */
        .logo-container {
            display: flex;
            align-items: center;
        }

        .logo {
            height: 40px; /* Tamanho da logo */
            margin-right: 10px;
        }

        .logo-text {
            font-size: 20px;
            font-weight: bold;
        }

        /* Data e título */
        .info {
            text-align: right;
        }
        .title {
            font-size: 18px;
            font-weight: bold;
        }

footer {
    display: flex;
    justify-content: space-between;
    background-color: #333;
    color: white;
    padding: 15px 20px;
}
footer div{
padding: 3px 3px;
}

/* Estilos dos links do MENU opcoes */

.lista a {
    text-decoration: none; /* Remove o sublinhado */
    color: black; /* Cor personalizada */
    background-color: white; /* Fundo colorido */
    font-weight: bold; /* Negrito */
    padding: 5px 10px; /* Espaçamento interno */
    border-radius: 5px; /* Bordas arredondadas */
    transition: 0.3s; /* Animação suave */
}

/* Quando o mouse passa sobre os links */
.lista a:hover {
    background-color: black; /* Fundo colorido */
    color: white; /* Muda a cor do texto */
    text-decoration: underline; /* Adiciona sublinhado */
}

    .post {
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      overflow: hidden;
      margin-bottom: 20px;
      display: flex;
      /* largura fixa ou responsiva */
      width: 100%;
      max-width: 500px;
    }

    .post-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px;
      flex: 1; /* para ocupar todo o espaço disponível */
    }

    /* Botão personalizado à esquerda */
    .custom-button {
      all: unset; /* Remove todos os estilos padrão do botão */
      border: none;
      padding: 10px 16px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 0.9em;
      white-space: nowrap;
    }

    /* Texto centralizado */
    .text-center {
      flex: 1;              /* para ocupar o espaço entre botão e imagem */
      font-size: 1em;
      color: #333;
      margin: 0 15px;       /* espaçamento lateral */
    }

    /* Imagem à direita */
    .post-image {
      max-width: 120px;     /* define largura máxima da thumbnail */
      height: auto;
      border-radius: 4px;
    }

    /* Exemplo de hover para o botão */
    .custom-button:hover {
      background: #0056b3;
    }

              .masonry-container {
      column-count: 4;
      column-gap: 20px;
      padding: 20px;
    }

    @media (max-width: 900px) {
      .masonry-container {
        column-count: 3;
      }
    }

    @media (max-width: 600px) {
      .masonry-container {
        column-count: 1;
      }
    }

.history{
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    margin: 15px 0px;
}

.history a {
    text-decoration: none; /* Remove o sublinhado */
    color: #007bff; /* Cor personalizada */
}

/* Quando o mouse passa sobre os links */
.history a:hover {
    color: #007bff; /* Cor azul padrão */
    text-decoration: underline; /* Adiciona sublinhado */
    cursor: pointer;
}