:root
{
	/* font-stacks start */
	--symbol-fonts: "Twemoji Mozilla", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "EmojiOne Color", "Android Emoji";
	--android-sans: "SamsungOne", Roboto, "Fira Sans", "Droid Sans", Arimo, "Breeze Sans";
	--system-stack: ui-sans-serif, system-ui, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Cantarell, Ubuntu, "Roboto Condensed", var(--android-sans), var(--symbol-fonts);
	--android-serif: "Roboto Serif", "Noto Serif", "Roboto Regular", Tinos;
	--palatino-stack: Athelas, Constantia, "Bitstream Charter", "URW Palladio L", "Roboto Slab", var(--android-serif), Palatino, "Palatino Linotype", Georgia, serif, var(--symbol-fonts);
	/* font-stacks end */
}

@media screen
{
	:root
	{
		--largest-font: round(nearest, 1.4rem, var(--rounding-fonts));
		--larger-font: round(nearest, 1.2rem, var(--rounding-fonts));
		--smaller-font: round(nearest, .8rem, var(--rounding-fonts));
		--smallest-font: round(nearest, .6rem, var(--rounding-fonts));
		color-scheme: light dark;
		font-size: 100%;
		min-block-size: 100vh;
		font-synthesis: none;
		font-family: var(--system-stack);
		font-variant-ligatures: none;
		-webkit-text-size-adjust: none;
		text-size-adjust: none;
		--padding-half: round(nearest, 0.25rem, var(--rounding-interval));
		--padding-standard: round(nearest, 0.5rem, var(--rounding-interval));
		--padding-double: round(nearest, 0.75rem, var(--rounding-interval));
		--ada-spacing-vertical: 2em;
		--rounding-interval: 1px;
		--rounding-fonts: 2px;
	}
	
	:is(h1, h2, h3, li)::before, a, li, p
	{
		--common-border-narrow: round(nearest, max(1px, .05em), var(--rounding-interval));
		--common-border-regular: round(nearest, max(2px, .1em), var(--rounding-interval));
		--common-border-wide: round(nearest, max(3px, .15em), var(--rounding-interval));
		--common-border-huge: round(nearest, max(4px, .2em), var(--rounding-interval));
	}
	
	a
	{
		--ada-button-size: 50px;
		--ada-link-spacing: round(nearest, max(10px, .25rem), var(--rounding-interval));
	}
	
	body
	{
		font-size: round(nearest, .9em, var(--rounding-interval));
		inline-size: auto !important;
		max-inline-size: 100%;
	}
	
	@media (min-width: 18em)
	{
		body { font-size: round(nearest, 1em, var(--rounding-interval)); }
	}
	
	@media (min-width: 35em)
	{
		body { font-size: round(nearest, 1.1em, var(--rounding-interval)); }
	}
	
	@media (min-width: 50em)
	{
		body { font-size: round(nearest, 1.2em, var(--rounding-interval)); }
	}
	
	*, *::before, *::after, *::first-letter { box-sizing: border-box; }
	em, cite { font-style: inherit; }
	strong { font-weight: inherit; }
	p, .slogan, ul, ol, li, .poetry, blockquote, cite { text-align: start; }
	body *::before, body *::after, h1, h2, h3 { text-align: center; }
	h1, h3 { font-weight: bold; }
	h1, h2 { text-transform: uppercase; }
	h2 { font-weight: normal; }
	h1 { font-size: var(--largest-font); }
	h2, h3 { font-size: var(--larger-font); }
	cite { display: block; }
	ul, ol { list-style-type: none; }
	#all :is(nav, .nav, .link-list) li a { border-radius: 1em; }
	#all :is(nav, .nav, .link-list) li { border-radius: 0; }
	
	#all .top-level :is(nav, .nav) li
	{
		background-color: transparent;
		border-width: 0;
	}
	
	*, ul, ol, li, *::before, *::after
	{
		padding-inline-start: 0;
		margin-inline-start: 0;
		padding-block-start: 0;
		margin-block-start: 0;
		padding-inline-end: 0;
		margin-inline-end: 0;
		padding-block-end: 0;
		margin-block-end: 0;
	}
	
	body
	{
		padding: max(10px, .4em);
		margin-block-start: 0 !important;
		margin-block-end: 0 !important;
		margin-inline-start: 0 !important;
		margin-inline-end: 0 !important;
		line-height: 1.75;
	}
	
	#all
	{
		padding: 0;
		margin: 3rem auto;
	}
	
	h1 { font-size: var(--largest-font); }
	h1, h2, h3 { margin-block-end: var(--padding-standard); }
	
	p, .slogan, ul, ol, cite, blockquote, .poetry
	{
		margin-block-start: var(--ada-spacing-vertical);
		margin-block-end: var(--ada-spacing-vertical);
	}
	
	:is(blockquote, p, .poetry, cite, li)::before { margin-block-end: var(--ada-spacing-vertical); }
	
	.top-level
	{
		margin-block-start: var(--ada-spacing-vertical);
		margin-block-end: var(--ada-spacing-vertical);
		padding-block-start: var(--ada-spacing-vertical);
		padding-block-end: var(--ada-spacing-vertical);
	}
	
	ul, ol, blockquote, cite
	{
		padding-block-start: var(--padding-half);
		padding-block-end: var(--padding-half);
		padding-inline-start: var(--padding-half);
		padding-inline-end: var(--padding-half);
	}
	
	li, h1, h2, h3, p, .slogan, .poetry
	{
		padding-block-start: var(--padding-standard);
		padding-block-end: var(--padding-standard);
		padding-inline-start: var(--padding-standard);
		padding-inline-end: var(--padding-standard);
	}
	
	:is(nav, .nav, .link-list) li a
	{
		padding-block-start: var(--padding-double);
		padding-block-end: var(--padding-double);
		padding-inline-start: var(--padding-double);
		padding-inline-end: var(--padding-double);
	}
	
	p, .slogan, .poetry, blockquote, cite
	{
		max-inline-size: 40rem;
		margin-inline-start: 0;
		margin-inline-end: 0;
		display: block;
	}
	
	main :is(p, .poetry, blockquote, cite, li)::before, :is(h1, h2, h3)::before, li a, main :is(p, .poetry, blockquote, cite, li) { border-style: solid; }
	main :is(p, .poetry, blockquote, cite, li) { border-width: var(--common-border-huge); }
	:is(h1, h2, h3)::before { border-width: var(--common-border-wide); }
	li a, main :is(p, .poetry, blockquote, cite, li)::before, :is(h1, h2, h3)::before { border-width: var(--common-border-regular); }
	
	a
	{
		text-decoration-line: underline;
		text-decoration-thickness: var(--common-border-wide);
		text-decoration-style: solid;
		min-inline-size: var(--ada-button-size);
		min-block-size: var(--ada-button-size);
	}
	
	a:focus
	{
		outline-style: solid !important;
		outline-width: var(--ada-link-spacing) !important;
		outline-offset: var(--ada-link-spacing) !important;
	}
	
	img
	{
		display: block;
		text-align: center;
		inline-size: 100%;
		max-inline-size: 100%;
		block-size: auto;
		margin-inline-start: auto;
		margin-inline-end: auto;
	}
	
	.image-wrapper
	{
		display: block;
		inline-size: 80svmin;
		max-inline-size: 80%;
		margin-inline-start: auto;
		margin-inline-end: auto;
		align-self: center;
	}
	
	blockquote
	{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		align-content: center;
		flex-direction: column;
		flex-wrap: nowrap;
	}
	
	blockquote::before, blockquote::after
	{
		display: block;
		font-size: 2em;
		font-style: italic;
		font-weight: bold;
		margin-inline-start: auto;
		margin-inline-end: auto;
		margin-block-start: var(--padding-standard);
		margin-block-end: var(--padding-standard);
		padding-block-start: var(--padding-standard);
		padding-block-end: var(--padding-standard);
		padding-inline-start: var(--padding-standard);
		padding-inline-end: var(--padding-standard);
		border-radius: 50%;
		aspect-ratio: 1;
	}
	
	blockquote::before, blockquote::after
	{
		inline-size: 2em;
		block-size: 2em;
	}
	
	:is(main, footer) a[href*='//']::after
	{
		content: ' (third party website)' !important;
		display: inline !important;
	}
	
	:is(main.top-level, footer.top-level) a[href^='https://benjamin-newton.com']::after
	{
		content: ' (my other website)' !important;
		display: inline !important;
	}
	
	:is(main.top-level, footer.top-level) a[href^='https://ben-new.faith']::after
	{
		content: ' (my other website)' !important;
		display: inline !important;
	}
	
	blockquote::before { content: open-quote; }
	blockquote::after { content: close-quote; }
	
	cite::before
	{
		content: "—";
		display: inline;
	}
	
	@media (18em <= width)
	{
		#logo, :is(header, footer) .ben-picture
		{
			inline-size: 10em;
			max-inline-size: 90%;
		}
	}
	
	@media (40em <= width)
	{
		.image-wrapper
		{
			inline-size: 60svmin;
			max-inline-size: 90%;
		}
	}
	
	@media (forced-colors: active)
	{
		#all .top-level
		{
			padding-block-start: 0 !important;
			padding-block-end: 0 !important;
		}
	}
	
	@media (prefers-reduced-motion: reduce)
	{
		:is(main.top-level, footer.top-level) .image-wrapper { display: none; }
	}
	
	@media (prefers-contrast: less)
	{
		#all .image-wrapper { display: block; }
	}
	
	#all #reserve-place #keep-in-view { display: block !important; }
	
	:root
	{
		--accent-color-hue: 140deg;
		--accent-color-bg-vibrance: 30%;
		--accent-color-hue-mixer: 25%;
	}
	
	header, footer, main, nav
	{
		--accent-color-bg-vibrance: 40%;
		--accent-color-hue: 50deg;
	}
	
	blockquote, p, .poetry, cite, li
	{
		--accent-color-bg-vibrance: 75%;
		--accent-color-hue: 40deg;
		--accent-color-hue-mixer: 0%;
	}
	
	:is(blockquote, p, .poetry, cite, li)::before
	{
		--accent-color-bg-vibrance: 25%;
		--accent-color-hue: 40deg;
		--accent-color-hue-mixer: 40%;
	}
	
	h2, h3
	{
		--accent-color-bg-vibrance: 70%;
		--accent-color-hue: 40deg;
		--accent-color-hue-mixer: 10%;
	}
	
	ul, ol
	{
		--accent-color-bg-vibrance: 100%;
		--accent-color-hue-mixer: 30%;
		--accent-color-hue: 30deg;
	}
	
	h1, :is(h1, h2, h3)::before
	{
		--accent-color-hue: 220deg;
		--accent-color-bg-vibrance: 100%;
		--accent-color-hue-mixer: 20%;
	}
	
	:is(header, nav, footer) a
	{
		--accent-color-hue: 180deg;
		--accent-color-border-vibrance: 75%;
		--accent-color-hue-mixer: 20%;
	}
	
	@media (prefers-color-scheme: light)
	{
		body
		{
			color: #111;
			--base-grey-mixer: #ddd;
		}
		
		a
		{
			color: black;
			text-decoration-color: black;
			border-color: #333;
		}
		
		header, footer, main, nav { --base-grey-mixer: #eee; }
		h1, h2, h3 { --base-grey-mixer: white; }
		ul, ol { --base-grey-mixer: #ddd; }
		blockquote, p, .poetry, cite, li { --base-grey-mixer: #ccc; }
		:is(blockquote, p, .poetry, cite, li)::before { --base-grey-mixer: white; }
		:is(h1, h2, h3)::before, h1 { --base-grey-mixer: #eee; }
		:root { --accent-color-bg-lightness: 70%; }
		header, footer, main, nav { --accent-color-bg-lightness: 75%; }
		h1, h2, h3 { --accent-color-bg-lightness: 80%; }
		:is(blockquote, p, .poetry, cite, li)::before { --accent-color-bg-lightness: 85%; }
		
		blockquote, p, .poetry, cite, li
		{
			--accent-color-bg-lightness: 90%;
			--accent-color-border-lightness: 75%;
		}
		
		:is(header, nav, footer) a
		{
			--accent-color-border-lightness: 25%;
			--base-grey-mixer: white;
		}
		
		ul, ol { --accent-color-bg-lightness: 85%; }
		h1, :is(h1, h2, h3)::before { --accent-color-bg-lightness: 75%; }
		main :is(p, .poetry, blockquote, cite, li)::before, :is(h1, h2, h3)::before, li a, main :is(p, .poetry, blockquote, cite, li) { border-color: white; }
	}
	
	@media (prefers-color-scheme: dark)
	{
		body
		{
			color: #eee;
			--base-grey-mixer: #222;
		}
		
		a
		{
			color: white;
			text-decoration-color: white;
			border-color: #ccc;
		}
		
		header, footer, main, nav { --base-grey-mixer: #111; }
		h1, h2, h3 { --base-grey-mixer: black; }
		ul, ol { --base-grey-mixer: #222; }
		blockquote, p, .poetry, cite, li { --base-grey-mixer: #333; }
		:is(blockquote, p, .poetry, cite, li)::before { --base-grey-mixer: black; }
		:is(h1, h2, h3)::before, h1 { --base-grey-mixer: #111; }
		:root { --accent-color-bg-lightness: 30%; }
		header, footer, main, nav { --accent-color-bg-lightness: 25%; }
		h1, h2, h3 { --accent-color-bg-lightness: 20%; }
		:is(blockquote, p, .poetry, cite, li)::before { --accent-color-bg-lightness: 15%; }
		
		blockquote, p, .poetry, cite, li
		{
			--accent-color-bg-lightness: 10%;
			--accent-color-border-lightness: 25%;
		}
		
		:is(header, nav, footer) a
		{
			--accent-color-border-lightness: 75%;
			--base-grey-mixer: black;
		}
		
		ul, ol { --accent-color-bg-lightness: 15%; }
		h1, :is(h1, h2, h3)::before { --accent-color-bg-lightness: 25%; }
		main :is(p, .poetry, blockquote, cite, li)::before, :is(h1, h2, h3)::before, li a, main :is(p, .poetry, blockquote, cite, li) { border-color: black; }
	}
	
	:root, body, header, footer, main, nav, ul, ol, h1, h2, h3, :is(p, li, .poetry, blockquote, cite, h1, h2, h3)::before { background-color: color-mix(in srgb, hsl(var(--accent-color-hue), var(--accent-color-bg-vibrance), var(--accent-color-bg-lightness)), var(--base-grey-mixer) var(--accent-color-hue-mixer)); }
	p, li, .poetry, blockquote, cite { background-color: color-mix(in srgb, hsl(var(--accent-color-hue), var(--accent-color-bg-vibrance), var(--accent-color-bg-lightness)), var(--base-grey-mixer) var(--accent-color-hue-mixer)); }
	:is(header, nav, footer) a { text-decoration-color: color-mix(in srgb, hsl(var(--accent-color-hue), var(--accent-color-border-vibrance), var(--accent-color-border-lightness)), var(--base-grey-mixer) var(--accent-color-hue-mixer)); }
	
	@media (prefers-color-scheme: light)
	{
		li a
		{
			border-color: white;
			background-image: linear-gradient(to bottom, white 0%, #ccc 100%);
		}
		
		main .normal-list li strong { background-color: hsla(0deg, 0%, 100%, 0.75); }
	}
	
	@media (prefers-color-scheme: dark)
	{
		li a
		{
			border-color: black;
			background-image: linear-gradient(to top, black 0%, #333 100%);
		}
		
		main .normal-list li strong { background-color: hsla(0deg, 0%, 0%, 0.75); }
	}
	
	h1, :is(h1, h2, h3)::before
	{
		--accent-color-bg-vibrance: 100%;
		--accent-color-hue-mixer: 20%;
	}
	
	@media (prefers-color-scheme: light)
	{
		main :is(p, li, li a, .poetry, blockquote, cite)::before
		{
			--rainbow-pattern-bg-lightness: 75%;
			--base-grey-mixer: #ccc;
		}
		
		main :is(p, li, li a, .poetry, blockquote, cite)
		{
			--rainbow-pattern-border-lightness: 75%;
			--base-grey-mixer: white;
		}
		
		main.top-level li a { --rainbow-pattern-border-lightness: 25%; }
	}
	
	@media (prefers-color-scheme: dark)
	{
		main :is(p, li, li a, .poetry, blockquote, cite)::before
		{
			--rainbow-pattern-bg-lightness: 25%;
			--base-grey-mixer: #333;
		}
		
		main :is(p, li, li a, .poetry, blockquote, cite)
		{
			--rainbow-pattern-border-lightness: 25%;
			--base-grey-mixer: black;
		}
		
		main.top-level li a { --rainbow-pattern-border-lightness: 75%; }
	}
	
	main :is(p, .poetry, blockquote, cite, li):nth-child(4n+1), main :is(p, .poetry, blockquote, cite, li):nth-child(4n+1)::before, main li:nth-of-type(4n+1) a { --rainbow-pattern-hue: 0deg; }
	main :is(p, .poetry, blockquote, cite, li):nth-child(4n+2), main :is(p, .poetry, blockquote, cite, li):nth-child(4n+2)::before, main li:nth-of-type(4n+2) a { --rainbow-pattern-hue: 100deg; }
	main :is(p, .poetry, blockquote, cite, li):nth-child(4n+3), main :is(p, .poetry, blockquote, cite, li):nth-child(4n+3)::before, main li:nth-of-type(4n+3) a { --rainbow-pattern-hue: 200deg; }
	main :is(p, .poetry, blockquote, cite, li):nth-child(4n+4), main :is(p, .poetry, blockquote, cite, li):nth-child(4n+4)::before, main li:nth-of-type(4n+4) a { --rainbow-pattern-hue: 300deg; }
	:root { --rainbow-pattern-hue-mixer: 75%; }
	main, nav, footer, header { --rainbow-pattern-hue-mixer: 50%; }
	
	main :is(p, .poetry, blockquote, cite, li)::before
	{
		--rainbow-pattern-bg-vibrance: 75%;
		--rainbow-pattern-hue-mixer: 0%;
		background-color: color-mix(in srgb, hsl(var(--rainbow-pattern-hue), var(--rainbow-pattern-bg-vibrance), var(--rainbow-pattern-bg-lightness)), var(--base-grey-mixer) var(--rainbow-pattern-hue-mixer));
	}
	
	main :is(p, .poetry, blockquote, cite, li)
	{
		--rainbow-pattern-border-vibrance: 50%;
		--rainbow-pattern-hue-mixer: 0%;
		border-color: color-mix(in srgb, hsl(var(--rainbow-pattern-hue), var(--rainbow-pattern-border-vibrance), var(--rainbow-pattern-border-lightness)), var(--base-grey-mixer) var(--rainbow-pattern-hue-mixer));
	}
	
	main li a
	{
		--rainbow-pattern-border-vibrance: 100%;
		--rainbow-pattern-hue-mixer: 0%;
		text-decoration-color: color-mix(in srgb, hsl(var(--rainbow-pattern-hue), var(--rainbow-pattern-border-vibrance), var(--rainbow-pattern-border-lightness)), var(--base-grey-mixer) var(--rainbow-pattern-hue-mixer));
	}
	
	@media (prefers-color-scheme: light)
	{
		:is(li, h1, h2, h3, p, .poetry, blockquote, cite)::before { background-image: radial-gradient(circle at 50% 0%, white 0%, hsla(0deg,0%,100%,0) 100%); }
		h1 { background-image: radial-gradient(circle at 50% 50%, white 0%, hsla(0deg,0%,100%,0) 100%); }
		h2, h3 { background-image: radial-gradient(circle at 50% 50%, white 0%, hsla(0deg,0%,100%,0) 100%); }
	}
	
	@media (prefers-color-scheme: dark)
	{
		:is(li, h1, h2, h3, p, .poetry, blockquote, cite)::before { background-image: radial-gradient(circle at 50% 0%, hsla(0deg,0%,0%,0) 0%, black 100%); }
		h1 { background-image: radial-gradient(circle at 50% 50%, black 0%, hsla(0deg,0%,0%,0) 100%); }
		h2, h3 { background-image: radial-gradient(circle at 50% 50%, black 0%, hsla(0deg,0%,0%,0) 100%); }
	}
	
	@media (prefers-color-scheme: light)
	{
		:root
		{
			--ada-fg-color: black;
			--ada-bg-color: white;
		}
	}
	
	@media (prefers-color-scheme: dark)
	{
		:root
		{
			--ada-fg-color: white;
			--ada-bg-color: black;
		}
	}
	
	.top-level 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;
	}
	
	.top-level li a:focus-visible { border-color: var(--ada-fg-color) !important; }
}

@media print
{
	/* print starts */
	body, body * { box-sizing: border-box; }
	
	:root
	{
		font-size: 16pt;
		font-family: var(--palatino-stack);
	}
	
	body
	{
		margin: .5in;
		padding: 0;
		background-color: white;
	}
	
	body, a { color: black; }
	.no-print, img, picture, nav { display: none; }
	h1, h2, h3, li, p, .slogan { page-break-inside: avoid; }
	
	#all::after
	{
		margin: 0 auto;
		inline-size: 7.5rem;
		block-size: 7.5rem;
		display: block !important;
		content: url('/little/cloudy/ben-new-qr-code.svgz');
	}
	
	#all::before
	{
		margin: 0 auto;
		inline-size: 7.5rem;
		block-size: 7.5rem;
		display: block !important;
		content: url('/related/preview/mask-icon.svgz');
	}
}