index.screen.css

body {
	color: #4c3106;
	background-color: #faf8f2;
	background-image: repeating-radial-gradient(circle at 50% 0, transparent 0, #d7d6d0 2em), repeating-linear-gradient(#cbc2bb55, #cbc2bb);
}

#content {
	font-size: clamp(1rem, 1.7vw, 1.5rem);
}

h1 {
	padding: 2rem 2rem 1rem;
	margin: 0 auto 3rem;
	font-size: clamp(1.5rem, 6vw, 300%);
	line-height: 1.1;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	background: var(--secondary-color);
	color: var(--secondary-fg-color);
	text-align: center;
	border-bottom-left-radius: 0.2rem;
	border-bottom-right-radius: 0.2rem;
	box-shadow: 0 1rem 2rem #0003;
}

#content-body {
	padding: 3em 3em 5em;
	border-radius: 0.2rem;
	background: var(--dirty-bg);
	box-shadow: inset 0 0 1em #54504263, 0 1em 2em #0003;
}

h2 {
	font-size: 200%;
	font-weight: 900;
	margin: 3rem 0 2rem;
}

h3 {
	font-weight: 900;
	margin: 2rem 0 1rem;
}

#table-of-contents {
	float: right;
	padding: 2rem;
	margin-bottom: 1em;
	margin-left: 1em;
	background: #fefcf6;
	box-shadow: 0 0.2em 0.4em #0002;
}

@media (width < 50em) {
	#table-of-contents {
		float: none;
		padding: 0;
		margin-left: 0;
		margin-bottom : 3em;
		background: transparent;
		box-shadow: none;
	}
}

#table-of-contents h2 {
	font-size: 120%;
	margin: 0 0 1rem;
}

p, ul {
	margin-bottom: 1em;
}