/* This sets all content to TNR font instead of their browser default, at 20px, extra (nicer looking) height, and centered. */
body {
	font-family: "Times New Roman";
	font-size: 20px;
	line-height: 1.5;
	margin: auto;
}
/* This div exists to create a boarder around the content.*/
div.boarder {
	display: flex;
	flex-wrap: wrap; /* This allows the div to wrap around the content. */
	justify-content: center; /* This centers the wrapped content. */
	align-items: center;
	max-width: 600px;
	margin: 2em; /* This creates space between the content and the boarder, otherwise it gets ugly. */
	/* Since we want more padding on the sides than on the top and bottom, the top and bottom are set universally first, then the left and right are set specifically. */
	padding: 2em;
	padding-left: 5em;
	padding-right: 5em;
	border: 1px solid grey;
}
/* This styles the header separately from the rest of the content. */
header {
	width: 100%; /* This keeps the decorative underscore from being too short*/
	text-transform: uppercase; /* This makes the text uppercase. */
	text-align: center;
	letter-spacing: 0.2em;
	margin-bottom: 2em;
	border-bottom: 1px solid lightgrey; /* This adds a decorative underline beneath the header. */
}
h1 {
	font-weight: 500; /* This makes the text a little thinner than default for a header. */
}
/* This specifier is used to style the h2 element separately from the rest of the header. */
h2 {
	font-weight: 500; /* This makes the text a little thinner than default for a header. */
	font-size: smaller; /* This makes the h2 font size smaller than default. */
	color: #006eb6; /* This changes text color to match the target. */
	margin: 0; /* This removes spacing between h2 and the decorative underline*/
}
li {
	margin-top: 1em; /* This adds space between list items. */
}
footer img {
	width: 150px; /* This sets the width of the image to 150px, regardless of the content size */
}
/* This styles the page differently in the event the user is viewing it in dark mode. */
.dark {
	background-color: #333;
	color: #fff;
}
.dark h2 {
	color: #4f9acf; /* Changes target color to approved accent, contrast ratio: 4.12 */
}