.filter-buttons {
  margin-bottom: 2rem;
  display: flex;
  gap: 0.5rem;
}

.filter-btn {
  font-family: var(--font-pixel);
  font-size: 1.1rem;
  padding: 0.75rem 1.5rem;
  border: none;
  cursor: pointer;
  border-radius: 0;
  transition: all 0.2s;
  color: var(--color-white);
  opacity: 0.5;
}

.filter-btn[data-filter="all"] {
  background: var(--color-yellow);
}

.filter-btn[data-filter="AI"] {
  background: var(--color-green);
}

.filter-btn[data-filter="Math"] {
  background: var(--color-blue);
}

.filter-btn:hover {
  opacity: 0.7;
}

.filter-btn.active {
  opacity: 1;
}

.article-preview {
  transition: opacity 0.3s, max-height 0.3s;
}

.article-preview.hidden {
  display: none;
}

.divider.hidden {
  display: none;
}