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

@layer base {
  h1 {
    @apply text-4xl;
  }
  h2 {
    @apply text-3xl;
  }
  h3 {
    @apply text-2xl;
  }
  h4 {
    @apply text-xl;
  }
}

@layer utilities {
  .perspective {
    perspective: 100px;
  }

  .preserve-3d {
    transform-style: preserve-3d;
  }

  .distance-1 {
    transform: translateZ(-50px) scale(1.5);
  }

  .distance-2 {
    transform: translateZ(-100px) scale(2);
  }

  .distance-3 {
    transform: translateZ(-150px) scale(2.5);
  }

  .-distance-1 {
    transform: translateZ(50px) scale(0.5);
  }
}