tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  position: relative;
  width: 100vw;
}

.link {
  @apply text-blue-500 visited:text-purple-500 underline;
}

@media (prefers-color-scheme: dark) {
  input[type="number"],
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="checkbox"],
  input[type="date"],
  select {
    @apply text-white bg-slate-700;
  }
  input[type="checkbox"] {
    @apply text-black bg-white;
  }
  textarea {
    @apply bg-slate-700 text-white;
  }
}

input[type="number"],
input[type="text"],
input[type="password"],
input[type="email"],
input[type="date"],
input[type="checkbox"],
select {
  @apply rounded;
}
input[type="checkbox"] {
  @apply cursor-pointer;
}

@keyframes opacity {
  0% {
    opacity: 30%;
  }
  50% {
    opacity: 50%;
  }
  100% {
    opacity: 30%;
  }
}

.htmx-request {
  animation: opacity 2s ease-in-out infinite;
}