.article-item h4 a {
  color: var(--default-color);
  transition: 0.3s;
}

.article-item h4 a:hover {
  color: var(--accent-color);
}

.caption-btn .caption {
  display: block;
  margin-bottom: 1rem;
  color: var(--accent-color);
  padding: 0.375rem 0.75rem;
  border-left: 1px solid color-mix(in srgb, var(--accent-color), transparent 15%);;
}

.caption-btn .btn {
  display: inline-block;
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
  padding: 0.375rem 0.95rem 0.375rem 0.75rem;
  border-radius: 1rem;
  transition: background-color 0.2s ease;
}

.caption-btn .btn:hover {
  color: var(--contrast-color);
  background: var(--accent-color);
}

@keyframes shake {
  0% { transform: translateX(0); }
  20% { transform: translateX(0); }
  40% { transform: translateX(2px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(0); }
  100% { transform: translateX(0); }
}

/* Apply the animation to the emoji */
.shake-emoji {
  display: inline-block; /* Needed for transform to work */
  animation: shake 0.5s ease-in-out infinite; /* infinite loops */
}