/* styles.css */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

:root {
  scroll-behavior: smooth;
}

/* Ini berlaku untuk semua browser */
body {
  scroll-padding-top: 5rem;
}

/* CSS khusus untuk Firefox */
@-moz-document url-prefix() {
  :root {
      scroll-padding-top: 5rem;
  }
}

@layer utilities {
  .prose kbd {
    @apply text-base-content; /* Warna teks dalam kbd */
  }
}
@layer components {
  .the-navbar {
    @apply sticky flex-row top-0 z-50 navbar bg-base-100 px-4 border-b border-base-200 backdrop-blur bg-opacity-80;
  }
  .text-hidden {
    @apply hidden
  }
  .the-card {
    @apply card rounded-none sm:rounded-xl bg-base-100 shadow-xl w-full md:max-w-3xl 2xl:max-w-4xl mx-auto min-h-screen sm:min-h-min flex flex-col sm:flex-none;
  }
  .the-photos-card {
    @apply card rounded-none sm:rounded-xl bg-base-100 shadow-xl w-full md:max-w-3xl 2xl:max-w-4xl mx-auto sm:card-side min-h-screen sm:max-h-[500px] sm:min-h-[500px] 2xl:max-h-[600px] 2xl:min-h-[600px] flex flex-col;
  }
  .prose pre {
    @apply bg-base-200 text-base-content;
  }
  .prose code:not(pre > code) {
    @apply bg-primary text-base-100;
  }
}
