: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
{
	/* sizes start */
	: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, .1em), var(--rounding-interval));
		--common-border-regular: round(nearest, max(2px, .15em), var(--rounding-interval));
		--common-border-wide: round(nearest, max(3px, .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; }
	
	*, 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
	{
		margin-block-start: var(--ada-spacing-vertical);
		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);
	}
	
	p, .slogan, .poetry, blockquote, cite
	{
		max-inline-size: 40rem;
		margin-inline-start: auto;
		margin-inline-end: auto;
		display: block;
	}
	
	:is(h1, h2, h3, li)::before, li { border-style: solid; }
	h1::before { border-width: var(--common-border-wide); }
	:is(h2, h3, li)::before { border-width: var(--common-border-regular); }
	li { border-width: var(--common-border-narrow); }
	
	a
	{
		text-decoration-line: underline;
		text-decoration-thickness: var(--common-border-narrow);
		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://cloudy.diamonds']::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; }
	
	@media (prefers-color-scheme: light)
	{
		body
		{
			color: #111;
			background-color: #ddd;
		}
		
		a
		{
			color: black;
			text-decoration-color: black;
		}
		
		header, footer, main { background-color: #eee; }
		blockquote, p, .normal-list li, h1, h2, h3 { background-color: white; }
	}
	
	@media (prefers-color-scheme: dark)
	{
		body
		{
			color: #eee;
			background-color: #222;
		}
		
		a
		{
			color: white;
			text-decoration-color: white;
		}
		
		header, footer, main { background-color: #111; }
		blockquote, p, .normal-list li, h1, h2, h3 { background-color: black; }
	}
	
	:root, body
	{
		--neutral-bg-intensity: 50%;
		--neutral-border-intensity: 50%;
		--neutral-bg-hue-mixer: 50%;
		--neutral-border-hue-mixer: 50%;
	}
	
	.top-level
	{
		--neutral-bg-intensity: 35%;
		--neutral-border-intensity: 35%;
		--neutral-bg-hue-mixer: 35%;
		--neutral-border-hue-mixer: 35%;
	}
	
	.top-level :is(h1, h2, h3, p, li)
	{
		--neutral-bg-intensity: 20%;
		--neutral-border-intensity: 20%;
		--neutral-bg-hue-mixer: 20%;
		--neutral-border-hue-mixer: 20%;
	}
	
	@media (prefers-color-scheme: light)
	{
		:root, body
		{
			--neutral-bg-hue: 200deg;
			--neutral-border-hue: 200deg;
		}
		
		.top-level
		{
			--neutral-bg-hue: 140deg;
			--neutral-border-hue: 140deg;
		}
		
		.top-level :is(h1, h2, h3, p, li)
		{
			--neutral-bg-hue: 80deg;
			--neutral-border-hue: 80deg;
		}
		
		:root, body
		{
			--neutral-bg-lightness: 75%;
			--neutral-border-lightness: 40%;
		}
		
		.top-level
		{
			--neutral-bg-lightness: 80%;
			--neutral-border-lightness: 35%;
		}
		
		.top-level :is(h1, h2, h3, p, li)
		{
			--neutral-bg-lightness: 85%;
			--neutral-border-lightness: 30%;
		}
		
		:root, body { --base-bg-grey-mixer: #bbb; }
		header, footer, main { --base-bg-grey-mixer: #ccc; }
		.normal-list { --base-bg-grey-mixer: #ddd; }
		.normal-list li, h1, h2, h3, p, .poetry, blockquote, cite { --base-bg-grey-mixer: #eee; }
		.normal-list li, h1, h2, h3 { --base-border-grey-mixer: #ccc; }
		:is(.normal-list li, h1, h2, h3)::before { --base-border-grey-mixer: white; }
		:is(.normal-list li, h1, h2, h3)::before, main .normal-list li strong { background-color: hsla(0deg, 0%, 100%, 0.5); }
	}
	
	@media (prefers-color-scheme: dark)
	{
		:root, body
		{
			--neutral-bg-hue: 270deg;
			--neutral-border-hue: 270deg;
		}
		
		.top-level
		{
			--neutral-bg-hue: 300deg;
			--neutral-border-hue: 300deg;
		}
		
		.top-level :is(h1, h2, h3, p, li)
		{
			--neutral-bg-hue: 330deg;
			--neutral-border-hue: 330deg;
		}
		
		:root, body
		{
			--neutral-bg-lightness: 25%;
			--neutral-border-lightness: 50%;
		}
		
		.top-level
		{
			--neutral-bg-lightness: 20%;
			--neutral-border-lightness: 60%;
		}
		
		.top-level :is(h1, h2, h3, p, li)
		{
			--neutral-bg-lightness: 15%;
			--neutral-border-lightness: 70%;
		}
		
		:root, body { --base-bg-grey-mixer: #444; }
		header, footer, main { --base-bg-grey-mixer: #333; }
		.normal-list { --base-bg-grey-mixer: #222; }
		.normal-list li, h1, h2, h3, p, .poetry, blockquote, cite { --base-bg-grey-mixer: #111; }
		.normal-list li, h1, h2, h3 { --base-border-grey-mixer: #333; }
		:is(.normal-list li, h1, h2, h3)::before { --base-border-grey-mixer: black; }
		:is(.normal-list li, h1, h2, h3)::before, main .normal-list li strong { background-color: hsla(0deg, 0%, 0%, 0.5); }
	}
	
	:root, body, .top-level, .normal-list, .normal-list li, h1, h2, h3, p, .poetry, blockquote, cite, :is(.normal-list li, h1, h2, h3)::before { background-color: color-mix(in srgb, hsl(var(--neutral-bg-hue), var(--neutral-bg-intensity), var(--neutral-bg-lightness)), var(--base-bg-grey-mixer) var(--neutral-bg-hue-mixer)); }
	.normal-list li, h1, h2, h3, :is(.normal-list li, h1, h2, h3)::before { border-color: color-mix(in srgb, hsl(var(--neutral-border-hue), var(--neutral-border-intensity), var(--neutral-border-lightness)), var(--base-border-grey-mixer) var(--neutral-border-hue-mixer)); }
	
	@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 (prefers-color-scheme: light)
	{
		h1, h2, h3, .normal-list li, nav li a { background-image: linear-gradient(to bottom, white 0%, transparent 100%); }
	}
	
	@media (prefers-color-scheme: dark)
	{
		h1, h2, h3, .normal-list li, nav li a { background-image: linear-gradient(to top, black 0%, transparent 100%); }
	}
	
	@media (prefers-reduced-motion: no-preference) and (prefers-contrast: no-preference) and (18em <= width)
	{
		#all main p:nth-of-type(7n+1) { --rainbow-pattern-hue: 0deg; }
		#all main p:nth-of-type(7n+2) { --rainbow-pattern-hue: 30deg; }
		#all main p:nth-of-type(7n+3) { --rainbow-pattern-hue: 60deg; }
		#all main p:nth-of-type(7n+4) { --rainbow-pattern-hue: 90deg; }
		#all main p:nth-of-type(7n+5) { --rainbow-pattern-hue: 120deg; }
		#all main p:nth-of-type(7n+6) { --rainbow-pattern-hue: 150deg; }
		#all main p:nth-of-type(7n+7) { --rainbow-pattern-hue: 200deg; }
		#all :is(main, nav) :is(ul, ol):nth-of-type(odd) li:nth-of-type(7n+1) { --rainbow-pattern-hue: 0deg; }
		#all :is(main, nav) :is(ul, ol):nth-of-type(odd) li:nth-of-type(7n+2) { --rainbow-pattern-hue: 30deg; }
		#all :is(main, nav) :is(ul, ol):nth-of-type(odd) li:nth-of-type(7n+3) { --rainbow-pattern-hue: 60deg; }
		#all :is(main, nav) :is(ul, ol):nth-of-type(odd) li:nth-of-type(7n+4) { --rainbow-pattern-hue: 90deg; }
		#all :is(main, nav) :is(ul, ol):nth-of-type(odd) li:nth-of-type(7n+5) { --rainbow-pattern-hue: 120deg; }
		#all :is(main, nav) :is(ul, ol):nth-of-type(odd) li:nth-of-type(7n+6) { --rainbow-pattern-hue: 150deg; }
		#all :is(main, nav) :is(ul, ol):nth-of-type(odd) li:nth-of-type(7n+7) { --rainbow-pattern-hue: 200deg; }
		#all :is(main, nav) :is(ul, ol):nth-of-type(even) li:nth-of-type(7n+1) { --rainbow-pattern-hue: 200deg; }
		#all :is(main, nav) :is(ul, ol):nth-of-type(even) li:nth-of-type(7n+2) { --rainbow-pattern-hue: 150deg; }
		#all :is(main, nav) :is(ul, ol):nth-of-type(even) li:nth-of-type(7n+3) { --rainbow-pattern-hue: 120deg; }
		#all :is(main, nav) :is(ul, ol):nth-of-type(even) li:nth-of-type(7n+4) { --rainbow-pattern-hue: 90deg; }
		#all :is(main, nav) :is(ul, ol):nth-of-type(even) li:nth-of-type(7n+5) { --rainbow-pattern-hue: 60deg; }
		#all :is(main, nav) :is(ul, ol):nth-of-type(even) li:nth-of-type(7n+6) { --rainbow-pattern-hue: 30deg; }
		#all :is(main, nav) :is(ul, ol):nth-of-type(even) li:nth-of-type(7n+7) { --rainbow-pattern-hue: 0deg; }
		:root { --rainbow-pattern-hue-mixer: 75%; }
		#all :is(main, nav) { --rainbow-pattern-hue-mixer: 50%; }
		:is(main, nav) :is(p, li) { --rainbow-pattern-hue-mixer: 25%; }
		
		#all :is(main, nav) :is(p, li):nth-of-type(odd)
		{
			--rainbow-pattern-bg-vibrance: 75%;
			--rainbow-pattern-border-vibrance: 100%;
		}
		
		#all :is(main, nav) :is(p, li):nth-of-type(even)
		{
			--rainbow-pattern-bg-vibrance: 38%;
			--rainbow-pattern-border-vibrance: 50%;
		}
		
		@media (prefers-color-scheme: light)
		{
			#all :is(main, nav) :is(p, li, .poetry, blockquote, h2, h3)
			{
				--rainbow-pattern-bg-lightness: 85%;
				--rainbow-pattern-border-lightness: 65%;
				--bw-bg-lightness: 90%;
				--bw-border-lightness: 55%;
				--base-grey-mixer: #ddd;
			}
		}
		
		@media (prefers-color-scheme: dark)
		{
			#all :is(main, nav) :is(p, li, .poetry, blockquote, h2, h3)
			{
				--rainbow-pattern-bg-lightness: 15%;
				--rainbow-pattern-border-lightness: 35%;
				--bw-bg-lightness: 10%;
				--bw-border-lightness: 45%;
				--base-grey-mixer: #222;
			}
		}
		
		#all :is(main, nav) :is(p, li)
		{
			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));
			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));
		}
	}
}

@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');
	}
}