@import "tailwindcss";
@theme {
  --font-inter: [ "var(--font-inter)", "sans-serif"];
  --font-montserrat: [ "var(--font-montserrat)", "sans-serif"];
}

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--inter), Arial, Helvetica, sans-serif;
}

.blog-content {
  @apply bg-[#FBFAF9] p-4 rounded-xl;
}

.blog-content h3 {
  @apply text-4xl font-bold mb-4 text-[#120A02];
}

.blog-content p {
  @apply text-xl mb-8 text-[#754C28];
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.responsive-video-container iframe {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}