input.css

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

@layer components {
  .button {
    @apply text-white relative border-[none] after:transition-all after:duration-[0.75s] after:content-[''] after:h-6 after:absolute after:border-0 after:border-transparent after:w-0 after:border-b-[3px] after:border-b-[#CA9C5E] after:border-solid after:left-0 after:-bottom-0.5 hover:after:h-full hover:after:w-full;
  }
  .zoom {
    @apply transition-transform duration-[0.2s] mx-auto my-0 hover:scale-105 cursor-pointer;
  }
  .myHidden {
    @apply opacity-0 blur-[5px] -translate-x-full transition-all duration-[2s];
  }
  .myShow {
    @apply opacity-100 blur-none translate-x-0;
  }
  .myHiddenRight {
    @apply opacity-0 blur-[5px] translate-x-full transition-all duration-[2s] overflow-x-hidden;
  }
  .myShowRight {
    @apply opacity-100 blur-none translate-x-0 relative;
  }
  .popOut {
    @apply opacity-0 blur-[5px] transition-all duration-[2s] scale-0;
  }
  .popIn {
    @apply opacity-100 blur-none scale-100;
  }
  .myBlur {
    @apply backdrop-blur-[10px] z-[100] fixed;
  }
  .selectEdit {
    @apply selection:text-white selection:bg-black;
  }
  .centered {
    @apply absolute m-auto inset-0;
  }
}