body {
  @apply font-garamond;
}

a:hover {
  @apply text-pine-900 dark:text-pine-100;
}

.tag {
  @apply p-2 bg-sand-100 border border-transparent rounded-lg whitespace-nowrap no-underline
  hover:border-sand-500 hover:text-gray-900 hover:opacity-100 
  dark:bg-gray-900 dark:text-sand-100 dark:border-gray-800 dark:hover:text-sand-100
  transition-all duration-200 ease-in-out;
  transition: border 2s ease-in;
}

.tag:hover {
  transition: border 0.1s ease-out;
}

.tag-cloud .tag:nth-child(10n+1):hover {
  @apply border-blue-500 dark:border-blue-900;
}

.tag-cloud .tag:nth-child(10n+2):hover {
  @apply border-clay-500 dark:border-clay-900;
}

.tag-cloud .tag:nth-child(10n+3):hover {
  @apply border-cyan-500 dark:border-cyan-900;
}

.tag-cloud .tag:nth-child(10n+4):hover {
  @apply border-gold-500 dark:border-gold-900;
}

.tag-cloud .tag:nth-child(10n+5):hover {
  @apply border-red-500 dark:border-red-900;
}

.tag-cloud .tag:nth-child(10n+6):hover {
  @apply border-pine-500 dark:border-pine-900;
}

.tag-cloud .tag:nth-child(10n+7):hover {
  @apply border-pink-500 dark:border-pink-900;
}

.tag-cloud .tag:nth-child(10n+8):hover {
  @apply border-moss-500 dark:border-moss-900;
}

.tag-cloud .tag:nth-child(10n+9):hover {
  @apply border-rust-500 dark:border-rust-900;
}

.tag-cloud .tag:nth-child(10n):hover {
  @apply border-sand-500 dark:border-sand-900;
}