/* embedding "Outfit" font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

/* base styles */
:root {
	font-size: 133%;
}

body {
	font-family: "Outfit", sans-serif;
	font-weight: 300;
	background-color: #FAFAFA;
}

/* headings */
h1 {
	font-weight: 700;
	font-size: 4rem;
	color: #B93026;
	line-height: 1.075;
	margin-block-start: 4.5rem;
	margin-block-end: 4.5rem;

	span:nth-child(1) {
		margin-inline-start: 10vw;
	}

	span:nth-child(3) {
		margin-inline-start: 22vw;
	}

	span:nth-child(5) {
		margin-inline-start: 16vw;
	}
}

h2 {
	font-weight: 500;
	font-size: 1.75rem;
	color: #333333;
	position: sticky;
	margin-block-start: 2rem;
	padding-block-start: 1rem;
	padding-block-end: 1rem;
	padding-inline-start: 16vw;
	margin-inline-end: 16vw;
	top: 0;
	/* background-color: #FAFAFA; */
}

h3 {
	font-weight: 500;
	font-size: 1.25rem;
	color: #333333;
	margin-block-start: 2rem;
	margin-inline-start: 22vw;
	margin-inline-end: 22vw;
	/* background-color: #FAFAFA; */
}

/* sidebar */
aside {
	position: absolute;
	margin-block-start: 1rem;
	margin-inline-start: 10vw;
	margin-inline-end: 10vw;
	text-align: end;

	p {
		font-size: 0.8em;
	}

	.chapter {
		font-weight: 500;
		font-size: 1.75rem;
		color: #B93026;
	}

	p:nth-child(1) {
		margin-block-end: 8.8em;
	}

	p:nth-child(2) {
		margin-block-end: 70.2em;
	}

	p:nth-child(3) {
		margin-block-end: 91.2em;
	}

	p:nth-child(4) {
		margin-block-end: 103.8em;
	}

	p:nth-child(5) {
		margin-block-end: 97.7em;
	}

	p:nth-child(6) {
		margin-block-end: 90em;
	}
}

/* navigation links */
nav {
	position: fixed;
	top: 0;
	right: 0;
	margin-block-start: 3.33rem;
	margin-inline-end: 8vw;
	text-align: end;
	line-height: 4;
	z-index: 1;
}

/* links */
a {
	font-weight: 400;
	color: #FFFFFF;
	background-color: #F3BC06;
	padding: 0.075rem;
}

a:hover {
	color: #F3BC06;
	background-color: #FAFAFA;
}

a:active {
	color: #EAAC00;
	background-color: #FAFAFA;
}

/* main text */
main {
	margin-block-end: 10rem;

	p {
		margin-block-start: 2rem;
		margin-inline-start: 22vw;
		margin-inline-end: 22vw;
		max-width: 40ch;
		line-height: 1.75;
	}
}

/* lists */
ul {
	margin-block-start: 2rem;
	/* indentation */
	margin-inline-start: 28vw;
	margin-inline-end: 28vw;
	line-height: 1.75;
	max-width: 30ch;
	/* from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style */
	list-style: square;

	/* again from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/::marker */
	::marker {
		color: #364CB1;
	}
}

/* emphasis */
em.numbers {
	background-color: #b9c6ff;
	padding: 0.075rem;
	font-size: 0.8rem;
}

em.fractions {
	/* fixing the fractions from not being formatted using my main font */
	font-family: Geneva, sans-serif, sans-serif;
	font-weight: 100;
}

/* color-coded emphasis */
.lighter-red {
	color: #E93323;
}

.lighter-blue {
	color: #627CEC;
}

.darker-blue {
	color: #364CB1;
}

/* footer */
footer {
	margin-block-start: 2rem;
	margin-block-end: 2rem;
	font-weight: 400;

	p {
		position: absolute;
		margin-inline-end: 8vw;
		right: 0;
	}

	p:nth-child(1) {
		margin-inline-end: 18vw;
	}

}

/* appendix */
details {
	margin-inline-start: 10vw;
	display: inline-block;

	span {
		display: inline-block;
	}
}

summary {
	color: #FFFFFF;
	background-color: #F3BC06;
	display: inline-block;
}

summary:hover {
	/* from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor */
	cursor: pointer;
	color: #F3BC06;
	background-color: #FAFAFA;
}