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

body {
	--header-height: 4lh;

	@media screen and (max-width: 600px) {
		--header-height: 5lh;

		header {
			display: flex;
			flex-direction: column;
			gap: 8px;
		}

		h1 {
			font-size: 20pt;
		}
	}
}

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

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;

	.selected {
		font-weight: bold;
	}

	a {
		color: white;
		text-decoration: none;
		cursor: default;

		&:link:hover {
			text-decoration: underline;
			cursor: pointer;
		}
	}
}

.page-background {
	position: fixed;
	z-index: -1;
	inset: 0;
	transform: translate(-30%, -20%);
}

section {
	position: relative;
	padding: 16px 0;
	overflow: hidden;

	&:first-of-type {
		padding-top: var(--header-height);
	}
}

.page-background {

	position: fixed;
	inset: 0;
	/* background-image: url("/portfolio/rio/foliage.jpg");
	background-attachment: fixed;
	background-size: cover;
	background-position: center; */
	min-height: 100vh;

}

.content-background {
	--blur: 0px;
	z-index: -1;
	position: absolute;
	inset: calc(var(--blur) * -1);
	width: calc(100% + var(--blur));
	height: calc(100% + var(--blur));
	object-fit: cover;
	clip-path: fill-box;
}

.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: #ffffffa0;
		backdrop-filter: brightness(1.5) blur(24px);
	}
}

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

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

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

.about-me {
	background-color: white;
}

.about-me,
.interests-portfolio {

	.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;
		}
	}
}

.services {
	.content-wrapper {
		display: flex;
		flex-wrap: wrap;
		gap: 24px;
		justify-content: center;
	}

	.service-container {
		flex: 1;
		position: relative;
		min-width: 320px;
		max-width: 560px;
		margin: 4px 16px;

		img {
			width: 100%;
		}

		p {
			position: absolute;
			top: 0;
			left: 0;
			transform: translate(-10%, -30%);
			margin: 0;

			color: white;
			font-weight: bold;
			font-size: 1.5rem;
			background-color: rgb(36, 41, 32);
			padding: 8px 12px;
		}
	}
}

.contact-us {
	background-color: white;
	padding: 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 {
	background-color: white;
	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;
		}
	}
}