@tailwind base;

a {
  @apply text-lg
}

a:hover,
a:focus {
  @apply underline
}

@tailwind components;

.nav-item {
  @apply flex text-gray-900 text-xs;

  @screen lg {
    @apply text-sm
  }

  @screen dark {
    @apply text-gray-200
  }
}

@tailwind utilities;

@responsive {
  .filter-contrast-1 {
    filter: contrast(1%)
  }

  .filter-invert-100 {
    filter: invert(100%)
  }
}

.with-arrow:after {
  content: "\A0\2192"
}