.site {
	--nav-height: 46px;
	--tab-width: 164px; /* careful: when changing this, also change @media here and in main/footer.css!! */

	--max-width-content: 2200px; /* wanna look good on ultra hd :P */
	--width-content-base: calc(100vw - 4 * var(--tab-width));
	--width-content-1800: calc(100vw - 2 * var(--tab-width));
	--width-content-swap: calc(100vw - var(--tab-width));
	--width-content-600: calc(100vw - 40px);
}

main.site {
	padding: 32px 0 calc(var(--footer-height) + 32px) 0;
	color: var(--contrast-2);
}

main.site p,
main.site a,
main.site h1,
main.site h2,
main.site h3,
main.site h4,
main.site h5,
main.site h6,
main.site hr,
main.site blockquote,
main.site ul {
	width: 100%;
	display: block;
	margin: 12px 0;
}

main.site hr {
	margin: 36px 0;
}

main.site > p,
main.site > a,
main.site > h1,
main.site > h2,
main.site > h3,
main.site > h4,
main.site > h5,
main.site > h6,
main.site > hr,
main.site > blockquote,
main.site > ul {
	margin: 12px auto;
	width: var(--width-content-base);
	max-width: var(--max-width-content);
}

main.site > hr {
	margin: 36px auto;
}

main.site p a {
	display: inline-block;
	width: auto;
}

main.site hr {
	border-color: var(--theme-1);
	border-width: 1px;
	border-style: solid;
}

main.site blockquote {
	font-size: large;
	font-weight: bold;
	position: relative;
	padding-left: 24px;
}

main.site blockquote::before,
main.site blockquote::after {
	font-family: "Font Awesome 6 Free";
	font-weight: 600;
	color: var(--theme-2);
	position: absolute;
}
main.site blockquote::before {
	content: "\f10d";
	left: 0;
}
main.site blockquote::after {
	content: "\f10e";
	margin-left: 8px; /* 24px from above minus 16px from quotes itself */
	right: auto;
}

main.site blockquote footer {
	display: inline;
	position: relative;
	color: var(--theme-1);
	margin: auto 12px;
	padding-left: 8px;
}
main.site blockquote footer::before,
main.site blockquote footer::after {
	font-family: "Font Awesome 6 Free";
	font-weight: 600;
	position: absolute;
}
main.site blockquote footer::before {
	content: "\005b";
	left: 0;
}
main.site blockquote footer::after {
	content: "\005d";
	margin-left: 2px; /* 8px from above minus 6px from brackets itself */
}

main.site ul {
	margin: 16px auto;
	padding: 16px 32px;
	list-style: none;
}

main.site ul li {
	position: relative;
	padding-left: 24px;
	margin-bottom: 8px;
}

main.site ul li::before {
	content: "\f105";
	font-family: "Font Awesome 6 Free";
	font-weight: 600;
	position: absolute;
	left: 0;
	top: 4px;
	color: var(--theme-1);
}

@media only screen and (max-width: 1800px) {

	main.site > p,
	main.site > a,
	main.site > h1,
	main.site > h2,
	main.site > h3,
	main.site > h4,
	main.site > h5,
	main.site > h6,
	main.site > hr,
	main.site > blockquote,
	main.site > ul {
		width: var(--width-content-1800);
	}

}

@media only screen and (max-width: calc(5 * 164px + 106.5px + 63.5px)) { /* n * var(--tab-width), where n numer of pages plus sports plus some tolerance */

	main.site > p,
	main.site > a,
	main.site > h1,
	main.site > h2,
	main.site > h3,
	main.site > h4,
	main.site > h5,
	main.site > h6,
	main.site > hr,
	main.site > blockquote,
	main.site > ul {
		width: var(--width-content-swap);
	}

}

@media only screen and (max-width: 600px) {

	main.site > p,
	main.site > a,
	main.site > h1,
	main.site > h2,
	main.site > h3,
	main.site > h4,
	main.site > h5,
	main.site > h6,
	main.site > hr,
	main.site > blockquote,
	main.site > ul {
		width: var(--width-content-600);
	}

}