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

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  @apply bg-gray-300 flex justify-center p-5 min-h-screen;
}

.content {
  @apply max-w-5xl w-full flex flex-col justify-between;
}

.dropdown-container {
  @apply relative;
}

.dropdown {
  @apply hidden flex-col rounded p-2 sm:absolute sm:bg-gray-400 sm:text-slate-800 sm:shadow;
}

.dropdown-button {
  @apply w-full text-center rounded px-2 hover:text-gray-400;
}

.dropdown-button:is(.dropdown-open) ~ .dropdown {
  @apply flex;
}

.dropdown > a {
  @apply bg-slate-800 sm:bg-gray-400 whitespace-nowrap p-2 text-center sm:text-left sm:rounded;
}

.dropdown > a:hover {
  @apply bg-slate-900 sm:bg-slate-200;
}

.carouselImage {
  @apply object-cover w-full;
}

.carouselLabel {
  @apply bg-accent py-1 text-center text-white;
}

.form-field {
  @apply rounded w-full bg-gray-200;
}

.form-element {
  @apply flex flex-col gap-1;
}

.submit-button {
  @apply cursor-pointer px-2 py-3 leading-none rounded text-white bg-accent hover:bg-gray-600 w-fit min-w-[100px];
}

.form-control.form-validated :is(input, textarea, select):invalid {
  @apply border border-red-500 ring-red-500;
}

.form-error {
  @apply hidden text-red-500;
}

.form-control.form-validated
  :is(input, textarea, select):invalid
  + .form-error {
  @apply block;
}