@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap');

:root {
	--heading-font: 'League Spartan', sans-serif;
	--body-font: 'League Spartan', Noto, sans-serif;
	--code-font: 'JetBrains Mono', 'Ubuntu Mono', 'IBM Plex Mono', monospace;
	--font-size-base: 4rem;
	--text-color: #fff;

	font-size: 1.125rem; /* League Spartan is visually small. */

	/* yellow */
	/*
	--primary-color: #ffb000;
	--primary-color-light: #fff3d9;
	--body-bg: #1c1200
	 */

	/* red */
	/*
	--primary-color: #ff4545;
	--primary-color-light: #ffe5e2;
	--body-bg: #21000d;
	 */
	/* blue */

	--primary-color: #00baff;
	--primary-color-light: #ceecff;
	--body-bg: #000021;


	/* green */
	/*
	--primary-color: #21ff42;
	--primary-color-light: #d4ffda;
	--body-bg: #001c17
	*/

	/* Valentýnská oslava 10 let {F}*/
	/*
	--body-bg: #fffdc9;
	--primary-color: #ff2994;
	--text-color: #101010;
	*/
}

body {
	padding: 2rem;
	background-color: var(--body-bg, #444);
	color: var(--primary-color-light, #fafafa);
	font-family: var(--body-font, sans-serif);
	line-height: 1.4;
}

:where(h1, h2, h3, h4, a:any-link) {
	color: var(--primary-color, #aaa);
}

code {
	font-size: calc(8/9 * 1em); /* 16px to compensate larger 1rem */
}

:where(ul, ol) {
	&[role="list"] {
		list-style: none;
		padding-left: 0;
		margin-block-end: 3em;

		h3 {
			margin-block-end: 0;
		}

		time,
		small {
			font-size: .666em;
			font-weight: 400;
		}

		time {
			display: block;
		}

		ul {
			padding-inline-start: 0;
		}
	}

	li {
		margin-block-end: 0.5em;
	}
}

h1 {
	display: flex;
	flex-direction: column-reverse;

	small {
		display: block;
		font-weight: 400;
		font-size: 1rem;
	}
}