html,
body {
	margin: 0;
	padding: 0;
	font-family:
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Oxygen,
		Ubuntu,
		Cantarell,
		"Open Sans",
		"Helvetica Neue",
		sans-serif;

	--max-width: 1200px;
}

header {
	position: fixed;
	inset: 8px;
	bottom: unset;
	z-index: 100;

	display: flex;
	justify-content: space-between;
	align-items: center;

	background-color: #1d2027;
	color: white;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 12px 1em;
	border: 1px solid white;
	border-radius: 24px;

	.header-logo {
		display: flex;
		align-items: center;
		gap: 12px;
		font-family: serif;

		img {
			height: 2lh;
			min-height: 0;
		}
	}

	@media screen and (max-width: 600px) {
		h1 {
			font-size: 20pt;
		}

		nav {
			display: none
		}
	}
}

h1,
h2,
h3 {
	margin: 0;
}

button {
	border: none;
	background: rgb(78, 90, 68);
	color: white;
	border-radius: 12px;
	padding: 8px 12px;
}

nav {
	display: flex;
	align-items: center;
	gap: 16px;
}

section {
	position: relative;
	padding: 16px 0;
}

.content-background {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.content-wrapper {
	max-width: var(--max-width);
	margin: auto;
	padding: 8px;
}

.card {
	background: white;
	padding: 16px;
	border-radius: 8px;

	&.translucent {
		color: rgb(36, 41, 32);
		background: #ffffffb0;
		backdrop-filter: blur(16px);
	}
}

.logo-header {
	padding-top: 3lh;

	.logo-row {
		padding: 64px 0;
		display: flex;
		justify-content: center;

		img {
			max-height: 160px;
			filter: brightness(100) drop-shadow(0 0 8px black);
		}
	}

	.content-background {
		filter: brightness(0.7);
	}
}

.about-me {
	.about-me-row {
		display: flex;
		align-items: stretch;
		gap: 64px;

		.card {
			flex: 1;
		}
	}

	.headshot {
		height: 100%;
		max-height: 320px;
		width: auto;
		min-width: 0;
		aspect-ratio: 1;
		object-fit: cover;
		border-radius: 50%;
	}



	@media screen and (max-width: 600px) {
		.about-me-row {
			flex-direction: column;
			gap: 16px;
		}

		.headshot {
			max-height: 120px;
			align-self: flex-start;
		}
	}
}

.contact-us {
	margin: 16px 0;

	.content-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;

		p {
			margin: 0;
		}

		.phone-number {
			font-weight: bold;
			font-size: 20pt;
		}

		button {
			font-size: 12pt;
		}
	}
}

footer {
	padding: 16px 0;
	border-top: 1px solid #24292080;
	box-shadow: 0 0 8px #24292040;

	.content-wrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: center;

		&>* {
			flex: 1;
		}
	}

	@media screen and (max-width: 600px) {
		.content-wrapper {
			flex-direction: column;
		}
	}
}