@charset "utf-8";

@media (prefers-color-scheme: light)
{
	:root
	{
		--ada-fg-color: black;
		--ada-bg-color: white;
		--less-fg-color: #171717;
		--less-bg-color: #e7e7e7;
	}
}

@media (prefers-color-scheme: dark)
{
	:root
	{
		--ada-fg-color: white;
		--ada-bg-color: black;
		--less-fg-color: #e7e7e7;
		--less-bg-color: #171717;
	}
}

#default-style li a:focus-visible { border-color: var(--ada-fg-color) !important; }

#default-style a:focus-visible
{
	color: var(--ada-fg-color) !important;
	background-color: var(--ada-bg-color) !important;
	outline-color: var(--ada-fg-color) !important;
	text-decoration-color: var(--ada-fg-color) !important;
	caret-color: var(--ada-fg-color) !important;
	accent-color: var(--ada-fg-color) !important;
	background-image: none !important;
	appearance: none !important;
}

:root { --basic-bg-hue: 50deg; }
#top-wrapper { --basic-bg-hue: 130deg; }
body > nav { --basic-bg-hue: 80deg; }
main { --basic-bg-hue: 180deg; }
footer { --basic-bg-hue: 30deg; }

@media (prefers-contrast: no-preference)
{
	:root
	{
		--basic-body-bg-mix: 75%;
		--basic-section-bg-mix: 70%;
		--basic-element-bg-mix: 80%;
		--basic-body-bg-saturation: 75%;
		--basic-section-bg-saturation: 70%;
		--basic-element-bg-saturation: 80%;
	}
	
	a
	{
		--basic-link-saturation: 75%;
		--basic-link-mix: 75%;
	}
	
	li a, main :is(h2, ul, ol), footer h3
	{
		--basic-element-bg-saturation: 50%;
		--basic-element-bg-mix: 70%;
		--basic-border-saturation: 50%;
		--basic-border-mix: 50%;
	}
	
	ul, ol
	{
		--basic-element-bg-mix: 80%;
		--basic-element-bg-saturation: 80%;
	}
	
	li, #page-nav, header
	{
		--basic-element-bg-mix: 45%;
		--basic-element-bg-saturation: 45%;
	}
}

@media (prefers-contrast: more)
{
	:root
	{
		--basic-body-bg-mix: 80%;
		--basic-section-bg-mix: 75%;
		--basic-element-bg-mix: 85%;
		--basic-body-bg-saturation: 80%;
		--basic-section-bg-saturation: 75%;
		--basic-element-bg-saturation: 85%;
	}
	
	a
	{
		--basic-link-saturation: 85%;
		--basic-link-mix: 85%;
	}
	
	li a, main :is(h2, ul, ol), footer h3
	{
		--basic-element-bg-saturation: 60%;
		--basic-element-bg-mix: 80%;
		--basic-border-saturation: 60%;
		--basic-border-mix: 60%;
	}
	
	ul, ol
	{
		--basic-element-bg-mix: 85%;
		--basic-element-bg-saturation: 85%;
	}
	
	li, #page-nav, header
	{
		--basic-element-bg-mix: 50%;
		--basic-element-bg-saturation: 50%;
	}
}

@media (prefers-contrast: no-preference)
{
	@media (prefers-color-scheme: light)
	{
		:root, *::before, *::after
		{
			--basic-body-bg-lightness: 75%;
			--basic-section-bg-lightness: 85%;
			--basic-element-bg-lightness: 90%;
		}
		
		li, #page-nav, header { --basic-element-bg-lightness: 87%; }
		a { --basic-link-lightness: 25%; }
		li a, main :is(h2, ul, ol), footer h3 { --basic-border-lightness: 45%; }
	}
	
	@media (prefers-color-scheme: dark)
	{
		:root, *::before, *::after
		{
			--basic-body-bg-lightness: 25%;
			--basic-section-bg-lightness: 15%;
			--basic-element-bg-lightness: 10%;
		}
		
		li, #page-nav, header { --basic-element-bg-lightness: 13%; }
		a { --basic-link-lightness: 75%; }
		li a, main :is(h2, ul, ol), footer h3 { --basic-border-lightness: 55%; }
	}
}

@media (prefers-contrast: more)
{
	@media (prefers-color-scheme: light)
	{
		:root, *::before, *::after
		{
			--basic-body-bg-lightness: 85%;
			--basic-section-bg-lightness: 90%;
			--basic-element-bg-lightness: 95%;
		}
		
		li, #page-nav, header { --basic-element-bg-lightness: 93%; }
		a { --basic-link-lightness: 20%; }
		li a, main :is(h2, ul, ol), footer h3 { --basic-border-lightness: 35%; }
	}
	
	@media (prefers-color-scheme: dark)
	{
		:root, *::before, *::after
		{
			--basic-body-bg-lightness: 15%;
			--basic-section-bg-lightness: 10%;
			--basic-element-bg-lightness: 5%;
		}
		
		li, #page-nav, header { --basic-element-bg-lightness: 7%; }
		a { --basic-link-lightness: 80%; }
		li a, main :is(h2, ul, ol), footer h3 { --basic-border-lightness: 65%; }
	}
}

@media (prefers-color-scheme: light)
{
	:root, *::before, *::after
	{
		--basic-base-body-bg: #999;
		--basic-base-section-bg: #aaa;
		--basic-base-element-bg: #ddd;
	}
	
	ul, ol { --basic-base-element-bg: #999; }
	p, blockquote, cite, .poetry, h1, h2, h3, blockquote, .poetry { --basic-base-element-bg: #ccc; }
	li, #page-nav, header { --basic-base-element-bg: #ddd; }
	li a, main :is(h2, ul, ol), footer h3 { --basic-base-element-bg: #eee; }
	
	:root
	{
		--basic-body-text-color: #222;
		--basic-link-text-color: #111;
	}
	
	a { --basic-base-link: black; }
	li a, main :is(h2, ul, ol), footer h3 { --basic-base-border: #333; }
	#license p, #license p::before, #license { border-color: var(--basic-body-text-color); }
}

@media (prefers-color-scheme: dark)
{
	:root, *::before, *::after
	{
		--basic-base-body-bg: #777;
		--basic-base-section-bg: #555;
		--basic-base-element-bg: #222;
	}
	
	ul, ol { --basic-base-element-bg: #777; }
	p, blockquote, cite, .poetry, h1, h2, h3 { --basic-base-element-bg: #333; }
	li, #page-nav, header { --basic-base-element-bg: #222; }
	li a, main :is(h2, ul, ol), footer h3 { --basic-base-element-bg: #111; }
	
	:root
	{
		--basic-body-text-color: #ddd;
		--basic-link-text-color: #eee;
	}
	
	a { --basic-base-link: white; }
	li a, main :is(h2, ul, ol), footer h3 { --basic-base-border: #ccc; }
	#license p, #license p::before, #license { border-color: var(--basic-body-text-color); }
}

:root, body { --basic-body-bg-color: color-mix(in srgb, var(--basic-base-body-bg), hsl(var(--basic-bg-hue), var(--basic-body-bg-saturation), var(--basic-body-bg-lightness)) var(--basic-body-bg-mix)); }
nav, main, footer, #top-wrapper, #page-title { --basic-section-bg-color: color-mix(in srgb, var(--basic-base-section-bg), hsl(var(--basic-bg-hue), var(--basic-section-bg-saturation), var(--basic-section-bg-lightness)) var(--basic-section-bg-mix)); }
ul, ol, li, p, blockquote, cite, .poetry, h1, h2, h3, #page-nav, header { --basic-element-bg-color: color-mix(in srgb, var(--basic-base-element-bg), hsl(var(--basic-bg-hue), var(--basic-element-bg-saturation), var(--basic-element-bg-lightness)) var(--basic-element-bg-mix)); }
a { --basic-link-color: color-mix(in srgb, var(--basic-base-link), hsl(var(--basic-bg-hue), var(--basic-link-saturation), var(--basic-link-lightness)) var(--basic-link-mix)); }

li a
{
	--basic-border-color: color-mix(in srgb, var(--basic-base-border), hsl(var(--basic-bg-hue), var(--basic-border-saturation), var(--basic-border-lightness)) var(--basic-border-mix));
	--basic-element-bg-color: color-mix(in srgb, var(--basic-base-element-bg), hsl(var(--basic-bg-hue), var(--basic-element-bg-saturation), var(--basic-element-bg-lightness)) var(--basic-element-bg-mix));
}

@media (50em <= width)
{
	main :is(h2, ul, ol), footer h3 { --basic-border-color: color-mix(in srgb, var(--basic-base-border), hsl(var(--basic-bg-hue), var(--basic-border-saturation), var(--basic-border-lightness)) var(--basic-border-mix)); }
}

#default-style :is(h1, h2, h3)::before, #default-style main :is(ul, ol):not(.nav-download) li a::after, #misc-nav::before, blockquote::before, blockquote::after { background-color: transparent; }
body { color: var(--basic-body-text-color); }
a { color: var(--basic-link-text-color); }
a { text-decoration-color: var(--basic-link-color); }
li a { border-color: var(--basic-border-color); }
body { background-color: var(--basic-body-bg-color); }
ul, ol, p, blockquote, cite, .poetry, h1, h2, h3, blockquote, .poetry, li, li a, #page-nav, header { background-color: var(--basic-element-bg-color); }
footer { border-block-start-color: var(--basic-body-text-color); }
#license p, #license p::before, #license { border-color: var(--basic-body-text-color); }
#top-wrapper, nav, footer, main, #page-title, *::before, *::after { background-color: var(--basic-section-bg-color); }

@media (prefers-contrast: more)
{
	@media (prefers-color-scheme: light)
	{
		#default-style li a { background-color: #eee; }
		
		:root
		{
			--basic-body-text-color: #111;
			--basic-link-text-color: black;
		}
	}
	
	@media (prefers-color-scheme: dark)
	{
		#default-style li a { background-color: #111; }
		
		:root
		{
			--basic-body-text-color: #eee;
			--basic-link-text-color: white;
		}
	}
}

@media (prefers-reduced-motion: no-preference)
{
	:root
	{
		--basic-symbol-saturation: 100%;
		--basic-symbol-bg-mix: 75%;
	}
	
	@media (prefers-color-scheme: light)
	{
		#default-style :is(#section-nav, .nav-download, #page-nav, header + nav, #footer-links, footer aside, #license)::before
		{
			--basic-symbol-lightness: 25%;
			--basic-symbol-base-bg: #333;
		}
		
		.nav-download li:nth-of-type(odd) a::before, .nav-download li:nth-of-type(even) a::after { background-color: hsl(0deg, 0%, 10%); }
	}
	
	@media (prefers-color-scheme: dark)
	{
		#default-style :is(#section-nav, .nav-download, #page-nav, header + nav, #footer-links, footer aside, #license)::before
		{
			--basic-symbol-lightness: 75%;
			--basic-symbol-base-bg: #ccc;
		}
		
		.nav-download li:nth-of-type(odd) a::before, .nav-download li:nth-of-type(even) a::after { background-color: hsl(0deg, 0%, 90%); }
	}
	
	#default-style :is(#section-nav, .nav-download, #page-nav, header + nav, #footer-links, footer aside, #license)::before { background-color: color-mix(in srgb, var(--basic-symbol-base-bg), hsl(var(--basic-bg-hue), var(--basic-symbol-saturation), var(--basic-symbol-lightness)) var(--basic-symbol-bg-mix)); }
}

@media (18em <= width <= 34em)
{
	@media (prefers-color-scheme: light)
	{
		#default-style :is(section h1, main h2, main h3)::before { background-color: hsla(0deg, 0%, 100%, 0.35); }
	}
	
	@media (prefers-color-scheme: dark)
	{
		#default-style :is(section h1, main h2, main h3)::before { background-color: hsla(0deg, 0%, 0%, 0.35); }
	}
}

@media (prefers-color-scheme: light)
{
	#default-style #license p::before { background-color: hsla(0deg, 0%, 100%, 0.35); }
}

@media (prefers-color-scheme: dark)
{
	#default-style #license p::before { background-color: hsla(0deg, 0%, 0%, 0.35); }
}

@media (50em <= width)
{
	main :is(h2, ul, ol), footer h3 { border-color: var(--basic-border-color); }
}

@media (35em <= width) and (prefers-reduced-motion: no-preference)
{
	#default-style #page-title
	{
		--rainbow-bg-1a: hsl(0deg, var(--rainbow-vibrance-a), var(--rainbow-lightness-a));
		--rainbow-bg-1b: hsl(30deg, var(--rainbow-vibrance-b), var(--rainbow-lightness-b));
		--rainbow-bg-2a: hsl(45deg, var(--rainbow-vibrance-a), var(--rainbow-lightness-a));
		--rainbow-bg-2b: hsl(60deg, var(--rainbow-vibrance-b), var(--rainbow-lightness-b));
		--rainbow-bg-3a: hsl(75deg, var(--rainbow-vibrance-a), var(--rainbow-lightness-a));
		--rainbow-bg-3b: hsl(90deg, var(--rainbow-vibrance-b), var(--rainbow-lightness-b));
		--rainbow-bg-4a: hsl(160deg, var(--rainbow-vibrance-a), var(--rainbow-lightness-a));
		--rainbow-bg-4b: hsl(200deg, var(--rainbow-vibrance-b), var(--rainbow-lightness-b));
	}
	
	#default-style #page-title { background-image: conic-gradient( var(--neutral-bg) 0deg, var(--rainbow-bg-1a) 30deg, var(--rainbow-bg-1b) 60deg, var(--neutral-bg) 90deg, var(--rainbow-bg-2a) 120deg, var(--rainbow-bg-2b) 150deg, var(--neutral-bg) 180deg, var(--rainbow-bg-3a) 210deg, var(--rainbow-bg-3b) 240deg, var(--neutral-bg) 270deg, var(--rainbow-bg-4a) 300deg, var(--rainbow-bg-4b) 330deg, var(--neutral-bg) 360deg ); }
	#default-style #page-title h1 { background-image: none; }
}

@media (35em <= width) and (prefers-contrast: no-preference)
{
	@media (prefers-color-scheme: light)
	{
		#default-style #page-title
		{
			--rainbow-vibrance-a: 100%;
			--rainbow-vibrance-b: 50%;
			--rainbow-lightness-a: 85%;
			--rainbow-lightness-b: 75%;
			--neutral-bg: #ccc;
		}
		
		#default-style #page-title h1 { background-color: hsla(0deg, 0%, 100%, 0.5); }
	}
	
	@media (prefers-color-scheme: dark)
	{
		#default-style #page-title
		{
			--rainbow-vibrance-a: 100%;
			--rainbow-vibrance-b: 50%;
			--rainbow-lightness-a: 15%;
			--rainbow-lightness-b: 25%;
			--neutral-bg: #333;
		}
		
		#default-style #page-title h1 { background-color: hsla(0deg, 0%, 0%, 0.5); }
	}
}

@media (35em <= width) and (prefers-contrast: more)
{
	@media (prefers-color-scheme: light)
	{
		#default-style #page-title
		{
			--rainbow-vibrance-a: 100%;
			--rainbow-vibrance-b: 100%;
			--rainbow-lightness-a: 90%;
			--rainbow-lightness-b: 80%;
			--neutral-bg: white;
		}
		
		#default-style #page-title h1 { background-color: hsla(0deg, 0%, 100%, 0.25); }
	}
	
	@media (prefers-color-scheme: dark)
	{
		#default-style #page-title
		{
			--rainbow-vibrance-a: 100%;
			--rainbow-vibrance-b: 100%;
			--rainbow-lightness-a: 10%;
			--rainbow-lightness-b: 20%;
			--neutral-bg: black;
		}
		
		#default-style #page-title h1 { background-color: hsla(0deg, 0%, 0%, 0.25); }
	}
}

#default-style :is(#nav-within-section, #page-nav, footer) li { background-color: transparent; }