body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f8f9fa;
        }
        
        header {
            background: #f8f9fa;
            padding: 10px 20px;
            text-align: center;
        }
        .post-link a {
        text-decoration: none; /* Remove o sublinhado */
        color: #007bff; /* Cor azul padrão */
        }

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

        .post-link 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;
        }

        .info a {
    text-decoration: none; /* Remove o sublinhado */
    color: black; /* Cor personalizada */
    font-weight: bold; /* Negrito */
}

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

        .date {
            font-size: 14px;
            opacity: 0.8;
        }

        .title {
            font-size: 18px;
            font-weight: bold;
        }
/* 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 */
    cursor: pointer;
}

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

iconify-icon{
    font-size: 25px;
}


.notificacao {
  position: fixed;
  top: 50%;
  left: 50%;
  /* Começa em escala reduzida para animação */
  transform: translate(-50%, -50%) scale(0.1);
  opacity: 0;
  /* Transição para as propriedades transform e opacity */
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  /* Nenhuma cor ou borda */
}
.notificacao.mostrar {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

  /*Container POST*/

          .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;
      }
    }

    .post {
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
      display: inline-block;
      width: 100%;
      break-inside: avoid;
    }

    /* Contêiner para a imagem e overlay */
    .image-container {
      position: relative;
    }

    .post img {
      width: 100%;
      height: auto;
      display: block;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
    }

    /* Overlay para votação */
    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.0);
      color: white;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      opacity: 0;
      transition: background 0.3s ease, opacity 0.3s ease;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
    }

    .image-container:hover .overlay {
      background: rgba(0, 0, 0, 0.5);
      opacity: 1;
    }

    /* Contêiner para o ícone no canto superior esquerdo */
    .overlay-icon {
      position: absolute;
      top: 10px;
      left: 10px;
      width: 24px;
      height: 24px;
    }

    .overlay-icon svg {
      width: 100%;
      height: 100%;
      fill: white;
    }

    /* Estilo dos botões de votação */
    .overlay .vote-btn {
      all: unset; /* Remove todos os estilos padrão do botão */
      cursor: pointer; /* Mantém o cursor pointer para indicar que é clicável */
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin: 10px;
      transition: transform 0.1s ease; /* suaviza o clique */
    }

    .vote-btn:active {
      transform: scale(0.9); /* botão encolhe ligeiramente ao clicar */
    }

    .vote-btn iconify-icon {
      font-size: 2.5rem; /* Ajuste o tamanho conforme preferir */
    }

    .post-content {
      padding: 15px;
    }
    
    /* Metadados: autor e link na mesma linha */
    .post-meta {
      font-size: 0.8em;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .post-meta .author {
      font-style: italic;
    }
    
    .post-meta .post-link {
      color: #007BFF;
      text-decoration: none;
      word-wrap: break-word;    /* Suporte antigo */
  overflow-wrap: break-word; /* Suporte moderno */
  word-break: break-word;   /* Alternativa útil para compatibilidade */
    }

    .post-content p {
      font-size: 0.95em;
      color: #444;
    }

    .xxx{
      font-size: 2.5rem;
    }

           .author a {
        text-decoration: none; /* Remove o sublinhado */
        color: black; /* Cor azul padrão */
        }

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

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

  /*Desabilitar o link*/  
.disabled-link {
  pointer-events: none;
  color: gray;
  text-decoration: none;
  cursor: default;
}

.score{
    font-weight: bold;
}

/* Estilos dos links Controls */

.controls 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 */
.controls a:hover {
    background-color: black; /* Fundo colorido */
    color: white; /* Muda a cor do texto */
    text-decoration: underline; /* Adiciona sublinhado */
    cursor: pointer;
}

.controls {
  display: flex;
  justify-content: space-between;
  padding: 40px;
}