body {
    font-family: 'Poppins', sans-serif;
}

html {
    font-size: 14px; /* ou menor, se preferir */
}

.post {
    border: 1px solid #ccc;
    padding: 15px;
    margin: 10px 0;
    background: #1e1e1e;
    color: white;
    border-radius: 8px;
}

.user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.meta button {
    margin-right: 10px;
    cursor: pointer;
}

.comments.hidden {
    display: none;
}
.post-content {
    max-width: 100%; /* Garante que a largura máxima da div seja 100% do seu container */
    width: 100%; /* A largura será 100% do seu elemento pai */
    overflow-wrap: break-word; /* Garante que o texto que ultrapassar a largura da div seja quebrado */
    word-wrap: break-word; /* Para garantir que as palavras longas ou URLs quebrem corretamente */
    word-break: break-word; /* Garante que palavras longas também sejam quebradas */
    overflow: hidden; /* Oculta qualquer conteúdo que ultrapasse a div */
    padding: 15px; /* Opcional, para garantir que o conteúdo tenha algum espaçamento interno */
    box-sizing: border-box; /* Certifica-se de que o padding não afete o cálculo da largura total da div */
}

.post-content h1, 
.post-content h2, 
.post-content h3, 
.post-content p, 
.post-content blockquote, 
.post-content ul, 
.post-content ol, 
.post-content a {
    word-wrap: break-word; /* Garante que qualquer conteúdo dentro da div que ultrapasse seja quebrado */
    overflow-wrap: break-word;
}

.post-content h1 { 
    font-size: 1.5rem; 
    font-weight: bold; 
    color: #EDEDED;
}

.post-content h2 { 
    font-size: 1.3rem; 
    font-weight: bold; 
}

.post-content h3 { 
    font-size: 1.2rem; 
    font-weight: bold; 
}

.post-content p { 
    margin-bottom: 10px; 
    color: white; 
}

.post-content pre { 
    background: #1e1e1e; 
    padding: 10px; 
    border-radius: 5px; 
    overflow-x: auto; 
    white-space: pre-wrap; /* Permite que quebre linha dentro de blocos <pre> */
}

.post-content code { 
    background: #2d2d2d; 
    padding: 2px 5px; 
    border-radius: 3px; 
}

.post-content blockquote { 
    border-left: 3px solid #4f46e5; 
    padding-left: 10px; 
    color: #bbb; 
}

.post-content ul, .post-content ol { 
    padding-left: 20px;
}

.post-content a { 
    color: #EDEDED; 
    text-decoration: underline;
}


.post-content h2 {
    font-size: 1.5rem;
    font-weight: bold;
    color: #ff7f00;
}

.post-content blockquote {
    border-left: 4px solid #6366f1;
    padding-left: 10px;
    font-style: italic;
    color: #ddd;
}

.post-content code {
    background: #1e293b;
    padding: 4px 6px;
    border-radius: 5px;
    color: #facc15;
}

.post-content pre {
    background: #1e293b;
    padding: 10px;
    border-radius: 5px;
    color: #f8fafc;
    overflow-x: auto;
}

.post-content img {
    
    border-radius: 20px;
    
}
a {
  text-decoration: none !important;
}
.reaction-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px; /* Borda arredondada */
    padding: 4px;
    background-color: rgba(255, 255, 255, 0.1); /* Fundo sutil */
}
 .reaction-btn {
      font-size: 32px;
      cursor: pointer;
      transition: transform 0.2s;
  }
  .reaction-btn:hover {
      transform: scale(1.2);
  }
/* Fundo do modal */
.modal {
  position: fixed;  /* Fixa o modal na tela */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);  /* Fundo semitransparente */
  display: none;  /* Inicialmente escondido */
  justify-content: center;
  align-items: center;
  z-index: 9999;  /* Garante que o modal fique acima de outros conteúdos */
}

/* Conteúdo do modal */
.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  width: 80%;
  max-width: 500px;
  z-index: 10000;  /* Garante que o conteúdo do modal fique acima do fundo */
}

/* Quando o modal estiver visível */
.modal.show {
  display: flex;  /* Torna o modal visível */
}

/* Impede rolagem da página quando o modal está aberto */
body.modal-open {
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
}