@charset "UTF-8";

:root {
	font-size: 13pt;
}

body {
	hyphens: auto;
	hyphenate-limit-chars: auto 3 4;
	font-variant-numeric: oldstyle-nums slashed-zero;
	
	--p-gap: 1.5em;
	--li-gap: calc(0.5 * var(--p-gap));
	--accent: var(--brand-yellow);
	--highlight: var(--brand-purple);
	--line-height: 1.6;
	
	--main-font: "Noto Serif", "Noto Sans Math", "Noto Sans Symbols", "Noto Sans Symbols 2", "Noto Sans Symbols2", serif;
}

main {
	width: 70%;
	max-width: 1000px;
	margin: 0 auto 4em;
	
	padding-bottom: calc(3em + var(--roundel-size));
	background-image: url("../assets/image/roundel.svg");
	background-position: bottom center;
	background-size: var(--roundel-size);
	background-repeat: no-repeat;
	
	--roundel-size: 7em;
}

body > header {
	font-size: 2.5em;
	margin-bottom: 3rem;
	text-align: center;
	font-variant-caps: small-caps;
	font-weight: 900;
	font-stretch: condensed;
	
	& * {
		text-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--brand-green);
	}
}

h1 {
	font-size: inherit;
	font-weight: inherit;
	
	--shadow-offset: 0.05em;
}

.edition {
	font-variant-caps: all-small-caps;
	font-size: 0.6em;
	font-weight: 800;
	
	--shadow-offset: 0.05em;
}

h2 {
	font-size: 1.9em;
	font-stretch: semi-condensed;
	
	&::before {
		content: var(--h-flourish);
		color: var(--highlight);
	}
}

:not(nav) > :is(ol, ul) {
	margin: 0 1em var(--p-gap) 2em;
	
	& li::marker {
		color: var(--highlight);
	}
	
	& & {
		margin-top: var(--p-gap);
	}
}

ol > li > ul {
	list-style-type: disc;
}

li {
	margin-bottom: calc(0.5 * var(--p-gap));
	line-height: var(--line-height);
}

footer {
	padding-bottom: var(--p-gap);
	
	& > p {
		text-indent: 1em;
		
		& a[href*="creativecommons.org/licenses/"] {
			/*font-variant-numeric: lining-nums slashed-zero;*/
			white-space: nowrap;	/* Only until the Line_Break values of the CC symbols are changed to Alphabetic. */
		}
	}
	
	& hr {
		height: 1rem;
		background-color: var(--text);
		background-image: linear-gradient(0deg, var(--brand-purple) 0%, var(--brand-purple) 20%, var(--brand-yellow) 20%, var(--brand-yellow) 80%, var(--brand-purple) 80%, var(--brand-purple) 100%);
		margin: var(--p-gap) 0;
	}
	
	& nav {
		text-align: center;
		font-size: 1.1em;
		
		& p::before {
			content: "☞ ";
		}
	}
}

a:hover {
	text-decoration-color: var(--highlight);
}

img.icon {
	width: 1em;
	height: 1em;
	position: relative;
	top: 0.1em;
}

@media (prefers-color-scheme: dark) {
	body {
		--accent: var(--brand-purple);
		--highlight: var(--brand-yellow);
	}
}

@media (max-width: 1000px) {
	main {
		width: 80%;
	}
}

@media (max-width: 825px) {
	main {
		width: 90%;
	}
}

@media (max-width: 650px) {
	main {
		width: 95%;
	}
}

@media (max-width: 500px) {
	body > header {
		font-size: 2.2em;
	}
	
	h2 {
		font-size: 1.7em;
	}
}

@media (max-width: 400px) {
	:root {
		font-size: 12pt;
	}
}