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

@layer base {
	:root {
		--background: 0 0% 100%;
		--foreground: 240 10% 3.9%;
		--card: 0 0% 100%;
		--card-foreground: 240 10% 3.9%;
		--popover: 0 0% 100%;
		--popover-foreground: 240 10% 3.9%;
		--primary: 221.2 83.2% 53.3%;
		--primary-foreground: 210 40% 98%;
		--secondary: 210 40% 96.1%;
		--secondary-foreground: 222.2 47.4% 11.2%;
		--muted: 210 40% 96.1%;
		--muted-foreground: 215.4 16.3% 46.9%;
		--accent: 210 40% 96.1%;
		--accent-foreground: 222.2 47.4% 11.2%;
		--destructive: 0 84.2% 60.2%;
		--destructive-foreground: 210 40% 98%;
		--border: 214.3 31.8% 91.4%;
		--input: 214.3 31.8% 91.4%;
		--ring: 221.2 83.2% 53.3%;
		--radius: 0.5rem;
		--font-sans: var(--font-geist-sans);
		--font-mono: var(--font-geist-mono);
	}

	.dark {
		--background: 240 10% 3.9%;
		--foreground: 0 0% 98%;
		--card: 240 10% 3.9%;
		--card-foreground: 0 0% 98%;
		--popover: 240 10% 3.9%;
		--popover-foreground: 0 0% 98%;
		--primary: 217.2 91.2% 59.8%;
		--primary-foreground: 222.2 47.4% 11.2%;
		--secondary: 217.2 32.6% 17.5%;
		--secondary-foreground: 210 40% 98%;
		--muted: 217.2 32.6% 17.5%;
		--muted-foreground: 215 20.2% 65.1%;
		--accent: 217.2 32.6% 17.5%;
		--accent-foreground: 0 0% 98%;
		--destructive: 0 62.8% 30.6%;
		--destructive-foreground: 0 0% 98%;
		--border: 217.2 32.6% 17.5%;
		--input: 217.2 32.6% 17.5%;
		--ring: 224.3 76.3% 48%;
	}
}

@layer base {
	* {
		@apply border-border;
	}

	body {
		@apply bg-background text-foreground;
		font-feature-settings: "rlig" 1, "calt" 1;
	}
}

@layer utilities {

	/* Hide scrollbar for Chrome, Safari and Opera */
	.no-scrollbar::-webkit-scrollbar {
		display: none;
	}

	/* Hide scrollbar for IE, Edge and Firefox */
	.no-scrollbar {
		-ms-overflow-style: none;
		/* IE and Edge */
		scrollbar-width: none;
		/* Firefox */
	}
}

/* Custom styles for our blog */
.blog-container {
	@apply container mx-auto px-4 max-w-5xl;
}

.blog-content {
	@apply prose dark:prose-invert prose-headings:font-bold prose-a:text-blue-600 dark:prose-a:text-blue-400 max-w-none;
}

.blog-content h1 {
	@apply text-3xl md:text-4xl font-extrabold my-6;
}

.blog-content h2 {
	@apply text-2xl md:text-3xl font-bold mt-8 mb-4;
}

.blog-content h3 {
	@apply text-xl md:text-2xl font-semibold mt-6 mb-3;
}

.blog-content p {
	@apply my-4 leading-7;
}

.blog-content ul,
.blog-content ol {
	@apply my-4 ml-6;
}

.blog-content li {
	@apply my-1;
}

.blog-content pre {
	@apply p-4 rounded-lg my-6 overflow-auto;
}

.blog-content code {
	@apply text-sm;
}

.blog-content blockquote {
	@apply border-l-4 border-gray-300 dark:border-gray-700 pl-4 italic my-6;
}

.blog-content img {
	@apply rounded-lg my-8 mx-auto;
}

/* Animations for Animated Hero */
@keyframes slideUp {
	from {
		transform: translateY(100%);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.animate-slide-up {
	animation: slideUp 0.8s ease forwards;
	opacity: 0;
}

.animate-fade-in {
	animation: fadeIn 1s ease forwards;
	opacity: 0;
}

.animation-delay-200 {
	animation-delay: 0.2s;
}

.animation-delay-400 {
	animation-delay: 0.4s;
}