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

@layer base {
  @font-face {
    font-family: "Work";
    src: local("Work"), url("fonts/Work/Work-Variable.ttf");
  }
}

@layer utilities {
  .brutal-box {
    @apply border-2 border-black rounded-box;
  }

  .brutal {
    @apply flex items-end border-2 border-black;
  }

  .brutal:hover {
    @apply -translate-x-1 -translate-y-1 brutal-shadow;
  }

  .brutal-shadow {
    box-shadow: 4px 4px 0 0 black;
  }

  .btn {
    @apply border-2 border-black transition no-animation -translate-x-1 -translate-y-1 brutal-shadow normal-case;
  }

  .btn:hover {
    @apply border-2 border-black;
  }

  .btn:active {
    @apply translate-x-0 translate-y-0 shadow-none;
  }
}

.center {
  @apply flex items-center justify-center;
}

.transitional {
  @apply transition-all duration-300 ease-out;
}

.resp-text {
  @apply text-sm md:text-base xxl:text-xl;
}

.resp-icon {
  @apply size-4 lg:size-6 xxl:size-6;
}

.resp-gap {
  @apply gap-2 xxl:gap-4;
}

.resp-btn {
  @apply btn-sm lg:btn-md xl:btn-lg xxl:btn-lg
}
