style.css

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

@layer base {
  html, body {
    @apply h-full;
  }

  body {
    font-family: "Numans", sans-serif;
    @apply bg-[#0A0F1A] text-white p-10 max-w-6xl m-auto;
  }

  h1 {
    font-family: "Nixie One", sans-serif;
    @apply text-4xl lg:text-5xl text-center lg:text-left;
  }

  h2 {
    @apply text-2xl lg:text-3xl;
  }

  button {
    @apply bg-zinc-500 text-zinc-300 px-4 py-2 rounded-lg transition duration-300;
  }
}

@layer components {
  .btn {
    @apply py-2 px-6 border-zinc-500 bg-transparent hover:bg-white hover:text-black border rounded-full transition-all duration-200 ease-linear;
  }

  .btn-primary {
    @apply bg-emerald-600 hover:bg-emerald-400 text-gray-950 font-semibold;
  }

  .title-border {
    @apply px-4 py-2 rounded-3xl border border-indigo-900 w-auto text-xs text-indigo-500;
  }

  .card {
    @apply bg-gray-950 text-white rounded-3xl border border-indigo-950;
  }

  .border-gradient {
    @apply bg-gradient-to-r from-emerald-500 from-10% via-indigo-500 via-30% to-gray-800 to-90% p-0.5 bg-[length:300%_300%];;
  }
  
  .border-gradient__box {
    @apply h-full w-full flex flex-col justify-between bg-gray-950 text-white rounded-2xl p-6;
  }

  .available-label {
    @apply inline-flex gap-3 items-center py-2 px-5 bg-gray-900 rounded-full w-auto;
  }

  .link-full {
    @apply absolute z-10 top-0 left-0 right-0 bottom-0;
  }

  .circle-blur {
    @apply w-20 h-20 bg-indigo-700 absolute right-3 bottom-3 blur-[70px];
  }

  .transition-smooth {
    @apply transition duration-500 ease-linear;
  }

  .bg-grad-black-indigo {
    @apply bg-gradient-to-l from-indigo-900 border-black border-2 hover:border-indigo-950 hover:from-indigo-800;
  }

  .bg-backdrop-gradient {
    @apply bg-gradient-to-r from-indigo-500 from-10% via-emerald-700 via-30% to-sky-800 to-80%;
  }

  .bg-backdrop-blur {
    @apply backdrop-blur-xl bg-white/20 p-5 rounded-3xl;
  }
}