/* quick customization */
	:root {
		--width: 900px; /* sets the maximum width of the middle section */
		--headingfont: "Georgia"; 
		--bodyfont: "Verdana"; 
	}

/* dark mode colors */
	@media (prefers-color-scheme: dark) {
		:root {
			--text: #100c08;
			--section: #000000; /* dark mode background color for the middle section */
			--border: #000000;
			--bgimage: linear-gradient(#000000,#000000); /* you could also use an image! formatting: url("example.png") */
		}
	}
	
/* page layout */ 	
	* { 
		scrollbar-color: var(--link) var(--border);
		overscroll-behavior: none;
		box-sizing: border-box;
		max-width: 100%; /* so everything adjusts on smaller screens */
	}
	body { 
		margin: 0; padding: 0;
		color: var(--text);
		background: var(--border) var(--bgimage);
		background-attachment: fixed;
		font-family: var(--bodyfont), sans-serif;
	}	
	main { 
		margin: 1rem 0;
}

footer {
		padding: 1rem 0 1.5rem 0;
	}
	.container > ul, footer p { 
		margin: 0;
		padding: 0;
		text-align: right;
	}
	.container > ul li { 
		list-style-type: none;
		display: inline-block;
		padding: 0 0.5rem;
	}
	
/* headings */
	h1, h2, h3, h4, nav p { 
		font-family: var(--headingfont), serif;
		line-height: 1;
		font-weight: bold;
		text-align: center;
		vertical-align: middle;
	}
	h1 { 
		font-size: calc(2.25rem + 2.5vw);
		text-align: center;
		vertical-align: middle;
	}