@font-face {
	font-family: Outfit;
	font-style: normal;
	font-weight: 200 700;
	font-display: swap;
	src: url("../webfonts/Outfit.ttf") format("truetype");
}

/* Light Mode (Default) */
:root {
	--background: oklch(1 0 0);
	--foreground: oklch(0.1450 0 0);
	--card: oklch(1 0 0);
	--card-foreground: oklch(0.1450 0 0);
	--popover: oklch(1 0 0);
	--popover-foreground: oklch(0.1450 0 0);
	--primary: oklch(0.2050 0 0);
	--primary-foreground: oklch(0.9850 0 0);
	--secondary: oklch(0.9700 0 0);
	--secondary-foreground: oklch(0.2050 0 0);
	--muted: oklch(0.9700 0 0);
	--muted-foreground: oklch(0.5560 0 0);
	--accent: oklch(0.9700 0 0);
	--accent-foreground: oklch(0.2050 0 0);
	--destructive: oklch(0.5770 0.2450 27.3250);
	--destructive-foreground: oklch(1 0 0);
	--border: oklch(0.9220 0 0);
	--input: oklch(0.9220 0 0);
	--ring: oklch(0.7080 0 0);
	--chart-1: oklch(0.85 0 0);
	--chart-2: oklch(0.70 0 0);
	--chart-3: oklch(0.55 0 0);
	--chart-4: oklch(0.40 0 0);
	--chart-5: oklch(0.25 0 0);
	--font-sans: "Outfit", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
	--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	--sidebar: oklch(0.985 0 0);
	--sidebar-foreground: oklch(0.1450 0 0);
	--sidebar-primary: oklch(0.2050 0 0);
	--sidebar-primary-foreground: oklch(0.9850 0 0);
	--sidebar-accent: oklch(0.9700 0 0);
	--sidebar-accent-foreground: oklch(0.2050 0 0);
	--sidebar-border: oklch(0.9220 0 0);
	--sidebar-ring: oklch(0.7080 0 0);
	--radius: 0.625rem;
	--shadow-x: 0;
	--shadow-y: 1px;
	--shadow-blur: 3px;
	--shadow-spread: 0px;
	--shadow-opacity: 0.1;
	--shadow-color: oklch(0 0 0);
	--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
	--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
	--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
	--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
	--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
	--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
	--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
	--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
	--tracking-normal: 0em;
	--spacing: 0.25rem;
	/* Radix-Inspired Accent Colors */
	--color-blue-accent: oklch(0.55 0.22 260);
	--color-purple-accent: oklch(0.55 0.20 280);
	--color-orange-accent: oklch(0.65 0.18 40);
	--color-green-accent: oklch(0.60 0.18 150);
	/* Accent Backgrounds (10% opacity) */
	--color-blue-accent-bg: oklch(0.95 0.02 260);
	--color-purple-accent-bg: oklch(0.95 0.02 280);
	--color-orange-accent-bg: oklch(0.97 0.02 40);
	--color-green-accent-bg: oklch(0.95 0.02 150);
	/* Gradients */
	--gradient-hero: linear-gradient(135deg, oklch(0.95 0.03 260) 0%, oklch(0.95 0.03 280) 100%);
	--gradient-feature: radial-gradient(circle at 50% 0%, oklch(0.97 0.02 260), transparent 70%);
}

.dark {
	--background: oklch(0.1450 0 0);
	--foreground: oklch(0.9850 0 0);
	--card: oklch(0.2050 0 0);
	--card-foreground: oklch(0.9850 0 0);
	--popover: oklch(0.2690 0 0);
	--popover-foreground: oklch(0.9850 0 0);
	--primary: oklch(0.9220 0 0);
	--primary-foreground: oklch(0.2050 0 0);
	--secondary: oklch(0.2690 0 0);
	--secondary-foreground: oklch(0.9850 0 0);
	--muted: oklch(0.2690 0 0);
	--muted-foreground: oklch(0.7080 0 0);
	--accent: oklch(0.3710 0 0);
	--accent-foreground: oklch(0.9850 0 0);
	--destructive: oklch(0.7040 0.1910 22.2160);
	--destructive-foreground: oklch(0.9850 0 0);
	--border: oklch(0.2750 0 0);
	--input: oklch(0.3250 0 0);
	--ring: oklch(0.5560 0 0);
	--chart-1: oklch(0.85 0 0);
	--chart-2: oklch(0.70 0 0);
	--chart-3: oklch(0.55 0 0);
	--chart-4: oklch(0.40 0 0);
	--chart-5: oklch(0.25 0 0);
	--sidebar: oklch(0.2050 0 0);
	--sidebar-foreground: oklch(0.9850 0 0);
	--sidebar-primary: oklch(0.9220 0 0);
	--sidebar-primary-foreground: oklch(0.2050 0 0);
	--sidebar-accent: oklch(0.2690 0 0);
	--sidebar-accent-foreground: oklch(0.9850 0 0);
	--sidebar-border: oklch(0.2750 0 0);
	--sidebar-ring: oklch(0.5560 0 0);
	--font-sans: "Outfit", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
	--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	--radius: 0.625rem;
	--shadow-x: 0;
	--shadow-y: 1px;
	--shadow-blur: 3px;
	--shadow-spread: 0px;
	--shadow-opacity: 0.1;
	--shadow-color: oklch(0 0 0);
	--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
	--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
	--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
	--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
	--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
	--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
	--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
	--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
	/* Radix-Inspired Accent Colors (Dark Mode) */
	--color-blue-accent: oklch(0.60 0.20 260);
	--color-purple-accent: oklch(0.60 0.18 280);
	--color-orange-accent: oklch(0.70 0.16 40);
	--color-green-accent: oklch(0.65 0.16 150);
	/* Accent Backgrounds (Dark Mode - 15% opacity) */
	--color-blue-accent-bg: oklch(0.25 0.04 260);
	--color-purple-accent-bg: oklch(0.25 0.04 280);
	--color-orange-accent-bg: oklch(0.27 0.03 40);
	--color-green-accent-bg: oklch(0.25 0.03 150);
	/* Gradients (Dark Mode) */
	--gradient-hero: linear-gradient(135deg, oklch(0.20 0.05 260) 0%, oklch(0.20 0.05 280) 100%);
	--gradient-feature: radial-gradient(circle at 50% 0%, oklch(0.22 0.04 260), transparent 70%);
}

/* Global Element Styles */
* {
	border-color: var(--border);
}

body {
	background-color: var(--background);
	color: var(--foreground);
	font-family: var(--font-sans);
}



.IlyoMenu {
	@apply absolute bottom-2 left-1/2 -translate-x-1/2 bg-white p-1 overflow-hidden rounded-full shadow-lg grid grid-flow-col gap-1 2xl:gap-3 2xl:p-1;
	background-color: #192b3a;
	--fa-primary-color: #ffffff;
	--fa-secondary-color: #ffffff;
	/*	--fa-secondary-opacity: 0.3;*/
}



	.IlyoMenu a {
		@apply items-center justify-center flex rounded-full transition duration-300 ease-in-out shrink-0 w-[28px] md:w-[32px] 2xl:w-[32px] h-[28px] md:h-[32px] 2xl:h-[32px];
	}



		.IlyoMenu a:link {
			/*@apply bg-red-400;*/
			/*@apply flex p-1 md:p-2 text-[14px] md:text-[22px] 2xl:text-[32px];*/
		}



		.IlyoMenu a:hover {
			background-color: #3dbc9f88; /*#192b3a11;*/
		}

		.IlyoMenu a img {
			@apply p-1 w-full h-full; /*w-[32px] md:w-[22px] 2xl:w-[32px] h-[32px] md:h-[22px] 2xl:h-[32px];*/
		}

		.IlyoMenu a i {
			@apply text-[16px] md:text-[18px] 2xl:text-[20px];
		}

.IlyoMenuHome {
	background-color: #ffffff;
}


.IlyoMenuSearch {
	@apply flex flex-row gap-1 2xl:gap-3 absolute left-0 top-0 w-full h-full rounded-full overflow-hidden p-1;
	background-color: #192b3a;
}

	.IlyoMenuSearch a {
		@apply items-center justify-center flex rounded-full transition duration-300 ease-in-out shrink-0 w-[28px] md:w-[32px] 2xl:w-[32px] h-[28px] md:h-[32px] 2xl:h-[32px];
	}

		.IlyoMenuSearch a img {
			@apply p-1 w-full h-full; /*w-[32px] md:w-[22px] 2xl:w-[32px] h-[32px] md:h-[22px] 2xl:h-[32px];*/
		}

	.IlyoMenuSearch div {
		@apply bg-white rounded-full grow overflow-hidden items-center justify-center;
	}

	.IlyoMenuSearch input {
		@apply bg-white text-sm h-full w-full focus:ring-0 focus:ring-offset-0 focus:outline-none p-2;
	}