/*
 * 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-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: 0;
	padding-top: 0;
	padding-bottom: 0;
}

/*
 * 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;
}

/*
 * Stretch the flex items by default to allow for the text and the bar to be as large as possible.
 */
#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);
}

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

@media (max-width: 60em) {
	#profile-content {
		flex-direction: column;
	}
	#profile-pic {
		width: 100%;
		height: auto;
		max-height: 20em;
	}
	#page-header nav ul {
		gap: 0.5em;
	}
}