@import "tailwindcss";

:root {
	--vp-font-family-base: 'Rubik Variable', sans-serif;
	--vp-font-family-mono: 'DM Mono', monospace;

	--vp-home-hero-image-background-image: linear-gradient(
		40deg,
		rgb(255, 255, 255, 0),
		rgb(255, 87, 205)
	);
	--vp-home-hero-image-filter: blur(30px);

	--vp-home-hero-name-color: transparent;
	--vp-home-hero-name-background: -webkit-linear-gradient(-30deg, #ff45ac, #ff78c2);

	--vp-c-brand-1: hsl(342, 90%, 65%);
	--vp-c-brand-2: hsl(327, 80%, 70%);
	--vp-c-brand-3: hsl(327, 80%, 60%);
}

@media (min-width: 640px) {
	:root {
		--vp-home-hero-image-filter: blur(50px);
	}
}

.dark {
	--vp-c-brand-1: hsl(342, 100%, 77%);

	--vp-c-bg: oklch(20.385% 0.00773 285.719);
	--vp-c-bg-alt: oklch(17.105% 0.00397 285.961);
	--vp-c-bg-elv: oklch(22.927% 0.01144 278.034);
	--vp-c-bg-soft: oklch(22.927% 0.01144 278.034);

	--vp-c-gray-1: oklch(43.933% 0.0226 248.367);
	--vp-c-gray-2: oklch(35.955% 0.02077 259.438);
	--vp-c-gray-3: oklch(30.266% 0.01685 266.452);
	--vp-c-gray-soft: oklch(50.504% 0.03148 248.444 / 0.16);
}

.vp-doc a:hover {
	color: rgb(203, 40, 99);
}

.dark .vp-doc a:hover {
	color: hsl(345, 100%, 85%);
}

html, body {
	overflow-x: hidden !important;
}