*,
*::before,
*::after {
    box-sizing: border-box;
}

*,
*::before,
*::after {
	--color-eagle-blue: #003865;
	--color-broadway-blue: #0061A0;
	--color-great-lakes: #0091DA;
	--color-orange-you-proud: #FF671F;
}

body {
	background-color: black;
}

.wrapper {
	width: 100%;
	margin: 0 auto;
	background-color: var(--color-eagle-blue);
	font-family: Verdana, sans-serif;
}

header {
	color: var(--color-orange-you-proud);
	background-color: black;
}

header > h1 {
	font-family: Cambria, serif;
	text-align: center;
	font-weight: bold;
	line-height: normal;
	font-variant-caps: small-caps;
	padding-bottom: 25px;
}

header > p {
	font-family: Verdana, sans-serif;
	background-color: white;
	text-align: center;
	font-weight: normal;
	line-height: 1.5em;
	margin-top: -1.325em;
}

.page-name {
	font-size: 0.8em;
}

a {
	font-family: Verdana, sans-serif;
	text-decoration: none;
	color: var(--color-eagle-blue);
}

a:link {
	text-decoration: none;
	color: var(--color-eagle-blue);
}

a:visited {
	text-decoration: none;
	color: var(--color-eagle-blue);
}

a:hover {
	text-decoration: underline;
	color: var(--color-eagle-blue);
}

a:focus {
	text-decoration: underline;
	color: var(--color-eagle-blue);
}

a:active {
	text-decoration: underline;
	color: var(--color-broadway-blue);
}

nav {
	background-color: white;
	margin-top: -25px;
}

nav > ul {
	list-style-type: none;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-content: center;
	justify-self: center;
	gap: 2em;
	padding-left: 0;
}

nav > ul > li {
	text-align: center;
	line-height: 1.5em;
}

main {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-content: center;
	justify-self: center;
	gap: 5em;
	width: 100%;
}

code {
	font-family: 'Cascadia Code', 'Cascadia Mono', Courier, monospace;
	font-weight: normal;
	background-color: black;
	color: var(--color-orange-you-proud);
	padding: 0.25em;
	margin: 0.125em;
	border-radius: 0.25em;
}

pre {
	background-color: black;
	font-family: 'Cascadia Code', 'Cascadia Mono', Courier, monospace;
	font-weight: normal;
	color: var(--color-orange-you-proud);
	padding: 0;
	tab-size: 5ch;
}

.code-block {
	background-color: black;
	color: var(--color-orange-you-proud);
	padding: 10px;
	border-style: hidden;
	border-radius: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

span.italics {
	font-style: italic;
}

.rd-section {
	background-color: white;
	padding: 25px;
	width: 100%;
}

.rd-section > h2 {
	font-family: Cambria, serif;
	font-weight: bold;
	line-height: 1.75em;
}

.rd-section > h2 > a {
	font-family: Cambria, serif;
	font-weight: bold;
	text-decoration: none;
	color: var(--color-eagle-blue);
}

.rd-section > h2 > a:link {
	text-decoration: none;
	color: var(--color-eagle-blue);
}

.rd-section > h2 > a:visited {
	text-decoration: none;
	color: var(--color-eagle-blue);
}

.rd-section > h2 > a:hover {
	text-decoration: none;
	color: var(--color-eagle-blue);
}

.rd-section > h2 > a:focus {
	text-decoration: none;
	color: var(--color-eagle-blue);
}

.rd-section > h2 > a:active {
	text-decoration: none;
	color: var(--color-broadway-blue);
}

.rd-section > p {
	line-height: 1.75em;
	font-family: Verdana, sans-serif;
}

.rd-section > ol > li {
	line-height: 1.75em;
	font-family: Verdana, sans-serif;
}

.rd-section > ul > li {
	line-height: 1.75em;
	font-family: Verdana, sans-serif;
}

.grid-area-demonstration {
	display: grid;
	grid-template-rows: repeat(10, 1fr);
	grid-template-columns: repeat(10, 1fr);
	padding: 10px;
	gap: 5px;
	background-color: var(--color-great-lakes);
	border: 5px solid black;
	aspect-ratio: 16 / 9;
}

.grid-box-1,
.grid-box-2,
.grid-box-3 {
	font-family: 'Cascadia Code', 'Cascadia Mono', Courier, monospace;
	font-size: 3rem;
	background-color: var(--color-orange-you-proud);
	border: none;
	display: grid;
	place-content: center center;
}

.grid-box-1 > p,
.grid-box-2 > p,
.grid-box-3 > p {
	margin: 0;
	font-size: clamp(16px, 5vw, 100px);
}

.grid-box-1 {
	grid-area: 3 / 2 / span 2 / span 4;
}

.grid-box-2 {
	grid-area: 8 / 3 / span 2 / span 2;
}

.grid-box-3 {
	grid-area: 1 / 7 / span 10 / span 3;
}

.rotate-upward {
	transform-origin: center;
	rotate: -90deg;
}

footer > p {
	font-family: Verdana, sans-serif;
	text-align: center;
	font-weight: bold;
	line-height: 1.75em;
}

footer > p > a {
	text-decoration: underline;
	color: white;
}

footer > p > a:link {
	text-decoration: underline;
	color: white;
}

footer > p > a:visited {
	text-decoration: underline;
	color: white;
}

footer > p > a:hover {
	text-decoration: underline;
	color: white;
}

footer > p > a:focus {
	text-decoration: underline;
	color: white;
}

footer > p > a:active {
	text-decoration: underline;
	color: var(--color-orange-you-proud);
}

@media screen and (min-width: 768px) {
	.wrapper {
		width: 70%;
		max-width: 1250px;
	}

	nav > ul {
		list-style-type: none;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-content: flex-start;
		justify-self: center;
		gap: 2em;
		padding-left: 0;
	}

	main {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-content: flex-start;
		justify-self: center;
		gap: 5em;
		width: 100%;
	}
}