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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@layer base {
  h1 {
    @apply scroll-m-20 text-4xl font-semibold tracking-wide lg:text-5xl;
  }

  h2 {
    @apply scroll-m-20 text-3xl font-semibold tracking-tight lg:text-4xl;
  }

  h3 {
    @apply scroll-m-20 text-2xl font-semibold tracking-tight lg:text-3xl;
  }

  h4 {
    @apply scroll-m-20 text-xl font-medium tracking-tight lg:text-2xl;
  }

  h5 {
    @apply scroll-m-20 text-lg tracking-tight lg:text-xl;
  }

  h6 {
    @apply scroll-m-20 tracking-tight lg:text-lg;
  }
  :root {
    --radius: 0.5rem;
  }
}

@layer utilities {
  .max-width {
    @apply mx-auto max-w-7xl;
  }

  .custom-transition {
    @apply transition-all duration-300;
  }

  /* margin and padding */
  .section-padding-x {
    @apply px-5 sm:px-8 md:px-12 lg:px-16 xl:px-20;
  }

  .section-padding-t {
    @apply pt-10 lg:pt-16 xl:pt-20;
  }

  .section-padding-y {
    @apply py-10 lg:py-16 xl:py-20;
  }

  .section-margin-y {
    @apply my-10 lg:my-16 xl:my-24;
  }
}

.loader {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 3px;
  background:
    radial-gradient(farthest-side, #ffa516 95%, #0000) 50% 0/12px 12px no-repeat,
    radial-gradient(
        farthest-side,
        #0000 calc(100% - 5px),
        #ffa516 calc(100% - 4px)
      )
      content-box;
  animation: l6 2s infinite;
}
@keyframes l6 {
  to {
    transform: rotate(1turn);
  }
}