@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 w-full bg-page flex flex-col justify-between min-h-screen;
}

/*Buttons*/
.btn {
  @apply py-2 px-4 font-semibold rounded;
}

.login-btn {
  @apply bg-accent text-slate-900 font-semibold rounded-md hover:bg-fore;
}

.reset-btn {
  @apply bg-gray-300 text-slate-900 font-semibold rounded-md hover:bg-fore;
}

/* Dropdown classes */
.dropdown-container {
  @apply relative;
}

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

.dropdown-button {
  @apply w-full text-left;
}

.dropdown-button:hover ~ .dropdown,
.dropdown:hover {
  @apply sm:flex;
}

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

.dropdown > a,
.navlink,
.dropdown-button {
  @apply whitespace-nowrap rounded text-slate-700;
}

.dropdown > a {
  @apply p-2;
}

.link > a {
  @apply text-blue-800;
}

.dropdown > a:hover,
.navlink:hover,
.dropdown-button:hover {
  @apply bg-fore;
}

#menu:is(.menu-open) {
  @apply flex;
}

/*Site map headers*/
.sitemap-header{
  @apply text-slate-900 bg-accent text-xl text-center rounded-xl px-11
}

.homepageImages{
  @apply w-full
}

.imageLabels{
  @apply flex p-2 justify-center text-center bg-fore text-stone-900
}