: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, li, .poetry, blockquote, cite { text-align: center; }
	main p { 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: auto;
		margin-inline-end: auto;
		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; }
	body, a, header, footer, main, nav, h1, h2, h3, ul, ol, blockquote, p, .poetry, cite, li, li a, :is(blockquote, p, .poetry, cite, li, 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-sepia-mixer) var(--accent-color-hue-mixer)); }
	
	
	:root
	{
		--accent-color-hue: 25;
		--accent-color-bg-vibrance: 60%;
		--accent-color-hue-mixer: 50%;
		--accent-color-link-hue: 125;
		--accent-color-link-vibrance: 90%;
		--accent-color-link-mixer: 10%;
	}
	
	@media (prefers-color-scheme: light)
	{
		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; }
		
		a { text-decoration-color: #222; }
	}
	
	@media (prefers-color-scheme: dark)
	{
		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; }
		
		a { text-decoration-color: #ddd; }
	}
	
	@media (prefers-reduced-motion: no-preference) and (prefers-contrast: no-preference) and (18em <= width)
	{
		header, footer, main, nav
		{
			--accent-color-hue: 75;
			--accent-color-bg-vibrance: 70%;
			--accent-color-hue-mixer: 60%;
		}
		
		h1, h2, h3
		{
			--accent-color-hue: 125;
			--accent-color-bg-vibrance: 80%;
			--accent-color-hue-mixer: 70%;
		}
		
		blockquote, p, .poetry, cite, li
		{
			--accent-color-hue: 175;
			--accent-color-bg-vibrance: 90%;
			--accent-color-hue-mixer: 80%;
		}
		
		main :is(p, .poetry, blockquote, cite, li)::before, :is(h1, h2, h3)::before
		{
			--accent-color-hue: 225;
			--accent-color-bg-vibrance: 100%;
			--accent-color-hue-mixer: 90%;
		}
	}
	
	@media (prefers-color-scheme: light)
	{
		:root
		{
			--accent-color-bg-lightness: 85%;
			--accent-color-link-lightness: 35%;
		}
		
		body
		{
			color: #111;
			--base-sepia-mixer: #E6CCB3;
		}
		
		a
		{
			color: black;
			--link-sepia-mixer: black;
		}
		
		header, footer, main, nav { --base-sepia-mixer: #EBD6C2; }
		h1, h2, h3 { --base-sepia-mixer: #F2E6D9; }
		ul, ol { --base-sepia-mixer: #EEDECD; }
		blockquote, p, .poetry, cite, li { --base-sepia-mixer: #F6EDE4; }
		:is(blockquote, p, .poetry, cite, li)::before { --base-sepia-mixer: #EEDECD; }
		:is(h1, h2, h3)::before { --base-sepia-mixer: #EBD6C2; }
		li a { --base-sepia-mixer: white; }
	}
	
	@media (prefers-color-scheme: dark)
	{
		:root
		{
			--accent-color-bg-lightness: 15%;
			--accent-color-link-lightness: 65%;
		}
		
		body
		{
			color: #eee;
			--base-sepia-mixer: #4D3219;
		}
		
		a
		{
			color: white;
			--link-sepia-mixer: white;
		}
		
		header, footer, main, nav { --base-sepia-mixer: #3E2814; }
		h1, h2, h3 { --base-sepia-mixer: #261A0D; }
		ul, ol { --base-sepia-mixer: #312211; }
		blockquote, p, .poetry, cite, li { --base-sepia-mixer: #1B1209; }
		:is(blockquote, p, .poetry, cite, li)::before { --base-sepia-mixer: #111; }
		:is(h1, h2, h3)::before { --base-sepia-mixer: #3E2814; }
		li a { --base-sepia-mixer: black; }
	}
	
	@media (prefers-reduced-motion: no-preference) and (prefers-contrast: no-preference) and (18em <= width)
	{
		main :is(p, .poetry, blockquote, cite, li), main :is(p, .poetry, blockquote, cite, li)::before, main li a
		{
			--accent-color-bg-vibrance: 100%;
			--accent-color-hue-mixer: 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 { --accent-color-hue: 0; }
		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 { --accent-color-hue: 100; }
		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 { --accent-color-hue: 200; }
		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 { --accent-color-hue: 300; }
		li a { --blend-dir-line: to bottom in oklch; }
		
		@media (prefers-color-scheme: light)
		{
			li a
			{
				background-image: linear-gradient(var(--blend-dir-line), white 0%, #E6CCB3 100%);
			}
			
			a { text-decoration-color: black; }
			main .normal-list li strong { background-color: hsl(0 0% 100% / 0.75); }
		}
		
		@media (prefers-color-scheme: dark)
		{
			li a
			{
				background-image: linear-gradient(var(--blend-dir-line), #4D3219 0%, black 100%);
			}
			
			a { text-decoration-color: white; }
			main .normal-list li strong { background-color: hsl(0 0% 0% / 0.75); }
		}
		
		:is(li, h1, h2, h3, p, .poetry, blockquote, cite)::before { --blend-dir-circle: circle at 50% 0% in oklch; }
		h1 { --blend-dir-circle: circle at 50% 50% in oklch; }
		h2, h3 { --blend-dir-circle: circle at 50% 50% in oklch; }
		
		@media (prefers-color-scheme: light)
		{
			:is(li, h1, h2, h3, p, .poetry, blockquote, cite)::before { background-image: radial-gradient(var(--blend-dir-circle), white 0%, hsl(0 0% 100% / 0) 100%); }
			h1 { background-image: radial-gradient(var(--blend-dir-circle), white 0%, hsl(0 0% 100% / 0) 100%); }
			h2, h3 { background-image: radial-gradient(var(--blend-dir-circle), white 0%, hsl(0 0% 100% / 0) 100%); }
		}
		
		@media (prefers-color-scheme: dark)
		{
			:is(li, h1, h2, h3, p, .poetry, blockquote, cite)::before { background-image: radial-gradient(var(--blend-dir-circle), hsl(0 0% 0% / 0) 0%, black 100%); }
			h1 { background-image: radial-gradient(var(--blend-dir-circle), black 0%, hsl(0 0% 0% / 0) 100%); }
			h2, h3 { background-image: radial-gradient(var(--blend-dir-circle), black 0%, hsl(0 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');
	}
}