@keyframes heart {
  0%,
  40%,
  80%,
  100% {
    transform: scale(1);
  }
  20%,
  60% {
    transform: scale(1.15);
  }
}
@keyframes bounce {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}

.hover-icon:hover {
  transform: scale(1.25);
}
.hover-icon-bounce:hover {
  animation: bounce 1s infinite;
}
.bounce {
  animation: bounce 1s infinite;
}
.heart {
  animation: heart 1s infinite;
}

/* Distinct colors */
.danger {
  color: #dc3545;
}

.danger-hover:hover {
  color: #dc3545;
}

.dark {
  color: #343a40;
}

.dark-hover:hover {
  color: #343a40;
}

.info {
  color: #17a2b8;
}

.info-hover:hover {
  color: #17a2b8;
}

.light {
  color: var(--md-default-fg-color);
}

.light-hover:hover {
  color: var(--md-default-fg-color);
}

.primary {
  color: var(--md-accent-fg-color);
}

.primary-hover:hover {
  color: var(--md-accent-fg-color);
}

.secondary {
  color: var(--md-default-fg-color--light);
}

.secondary-hover:hover {
  color: var(--md-default-fg-color--light);
}

.success {
  color: #28a745;
}

.success-hover:hover {
  color: #28a745;
}

.warning {
  color: #ffc107;
}

.warning-hover:hover {
  color: #ffc107;
}

/* Extra css classes to change layouts */
.base-border-radius {
  border-radius: var(--base-border-radius);
}

.md-typeset .slim-button {
  padding: 0.3em 1.3em;
}

.md-typeset .admonition,
.md-typeset details {
  font-size: 0.8rem;  /* You can go higher if needed */
}