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

@layer components {
  .nav-item > a {
    @apply rounded-md transition ease-in-out duration-300 inline-block px-2 pb-[10px] hover:pb-[7px] pt-2
      bg-green-100 hover:bg-green-200 shadow-md
      border border-green-200 hover:border-green-300 border-b-green-500 hover:border-b-green-600 hover:border-b-4;
  }

  .active > a {
    @apply bg-green-300 border-green-300 border-b-4 border-b-green-600 pb-[7px];
  }

  .adm_nav-item > a {
    @apply rounded-md transition ease-in-out duration-300 inline-block px-2 pb-[10px] hover:pb-[7px] pt-2
      bg-blue-100 hover:bg-blue-200 shadow-md
      border border-blue-200 hover:border-blue-300 border-b-blue-500 hover:border-b-blue-600 hover:border-b-4;
  }

  .adm_active > a {
    @apply bg-blue-300 border-blue-300 border-b-4 border-b-blue-600 pb-[7px];
  }
}

#atu {
  transition: all 0.2s ease, visibility 0s;
  border-radius: 0px;
  background: repeat padding-box border-box 0% 0% / auto auto scroll
      linear-gradient(180deg, rgba(8, 50, 4, 0.5) 0%, rgba(8, 50, 4, 0.5) 100%),
    no-repeat padding-box border-box 78% 59%/200% scroll url("/static/atu.jpg");
  display: block;
}
