:root {
	--pallette-dark-0: #11191f;
	--pallette-dark-1: #003066;
	--pallette-dark-2: #004190;
	--pallette-dark-3: #0058BD;
	--pallette-light-0: #fff;
	--pallette-light-1: #1281FF;
	--pallette-light-2: #66AEFF;
	--pallette-light-3: #B0D5FF;
}

[data-theme=light],
:root:not([data-theme=dark]) {
	color-scheme: light;
	--known-background: var(--pallette-light-0);
	--primary: var(--pallette-dark-1);
	--secondary: var(--pallette-dark-2);
	--h1-color: var(--pallette-dark-1);
	--h2-color: var(--pallette-dark-2);
	--h3-color: var(--pallette-dark-3);
	--h4-color: var(--pallette-dark-1);
	--h5-color: var(--pallette-dark-2);
}

@media only screen and (prefers-color-scheme: dark) {
	:root:not([data-theme=light]) {
		color-scheme: dark;
	--known-background: var(--pallette-dark-0);
	--primary: var(--pallette-light-1);
	--secondary: var(--pallette-light-2);
	--h1-color: var(--pallette-light-1);
	--h2-color: var(--pallette-light-2);
	--h3-color: var(--pallette-light-3);
	--h4-color: var(--pallette-light-1);
	--h5-color: var(--pallette-light-2);
	}
}

/*
 * Override max width of content for improving readability.
 *
 * see:
 * https://ux.stackexchange.com/questions/108801/what-is-the-best-number-of-paragraph-width-for-readability
 */
body > header, body > footer, body > main {
	max-width: 60em;
}

/*
 * Shrink the vertical padding and margins to be more space-efficient.
 */
#page-header {
	padding-top: 2.5em;
	padding-bottom: 1em;
}
#page-nav {
	overflow: hidden;
}
#page-content {
	padding-top: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}
#profile {
	margin-top: 2em;
	margin-bottom: 0;
}
#profile header {
	padding-top: 1em;
	padding-bottom: 1em;
	margin-bottom: 2em;
}
#profile header h1 {
	margin: 5px;
}
#profile footer {
	margin-top: 2em;
	padding-top: 1em;
	padding-bottom: 1em;
}
#page-footer {
	margin-top: 3em;
	margin-bottom: 1em;
	padding-top: 0;
	padding-bottom: 0;
}
#page-footer nav {
	margin-bottom: 3em;
}

/*
 * Space out the nav items to make it clear that the dotted lines are disconnected.
 */
#page-header nav ul {
	gap: 0.75em;
}

/*
 * The selected nav item should be bold and clear.
 */
.selected {
	font-weight: bold;
}

/*
 * Custom Header
 */

section.hero {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;
	flex-grow: 0;
	flex-shrink: 0;
}

section.hero .hero-content {
	padding: 2em 0;
}

section.hero .filler {
	flex-grow: 1;
	flex-shrink: 1;
	background: linear-gradient(90deg, var(--known-background) 0%, var(--pallette-dark-1) 90%);
	display: flex;
	flex-direction: row-reverse;
	justify-content: end;
}

section.hero .filler .filler-content {
	padding: 2em 1em 2em 0;
	text-align: right;
}
section.hero .filler h1 {
	color: var(--pallette-light-2);
}
section.hero .filler h2 {
	color: var(--pallette-light-3);
}

/*
 *
 */

/*
 * Stretch the flex items by default to allow for the text and the bar to be as large as possible.
 */
.product-content {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 25px;
	align-items: stretch;
}
#profile-content {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 25px;
	align-items: stretch;
}

/*
 * Aspect ratio of 1 makes sure the picture is in a square (even though the picture is slightly rectangular).
 */
#profile-pic {
	border-radius: 2em;
	aspect-ratio: 1;
	width: auto;
	max-width: 20em;
	height: 100%;
	align-self: center;
}
#vertical-bar {
	border: 2px solid var(--muted-border-color);
}

#page-footer nav > ul {
	align-items: start;
}
#page-footer nav > ul > li {
	padding: 0 1em 0 0;
}

#page-footer nav > .directory {
	display: flex;
	flex-direction: row;
	gap: 2em;
	align-items: start;
}

#page-footer nav .directory > .directory-section {
	display: flex;
	flex-direction: column;
}

#page-footer nav .directory > .directory-section > h4 {
	padding: 0;
	margin: 0;
}

#page-footer nav .directory > .directory-section > .directory-section-list {
	display: flex;
	flex-direction: column;
	align-items: start;
}

#page-footer nav .directory > .directory-section > .directory-section-list > div {
	padding: 0;
	margin: 0;
}

#page-footer nav img {
	filter: saturate(0) brightness(2);
}

/*
 * Change the color to de-emphasize the footer.
 */
#page-footer footer {
	text-align: center;
	color: var(--muted-color);
}

@media (max-width: 45em) {
	#profile-content {
		flex-direction: column;
	}
	#profile-pic {
		width: 100%;
		height: auto;
		max-height: 20em;
	}
	#page-header nav ul {
		gap: 0.5em;
	}
	section.hero {
		justify-content: center;
	}
	section.hero .filler {
		display: none;
	}
	#page-footer nav > .directory {
		gap: 1em;
	}
}