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

:root {
	--clr-bg: 215 43% 5%;
	--clr-bg-alt: 0 0% 13%;
	--clr-text: 0 100% 100%;
	--clr-accent: 40 69% 64%;

	--fs-body: 1rem;
	--fs-heading: 1.25rem;

	--ff-body: "Lato", sans-serif;
	--ff-heading: "Lora", serif;
}

html {
	font-size: 16px;
}

body {
	background-color: hsl(var(--clr-bg) / 1);
	margin: 0;
	line-height: 1.5;
}

header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background-color: hsl(var(--clr-bg-alt) / 1);
	padding-block: 1rem;

	.container {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	img {
		width: 64px;
		aspect-ratio: 1 / 1;
		border: 2px solid hsl(var(--clr-accent) / 1);
	}

	a {
		color: #000;
		background-color: hsl(var(--clr-accent) / 1);
		border: 2px solid hsl(var(--clr-accent) / 1);
		padding: 0.5rem 1rem;
		text-decoration: none;
		font-size: var(--fs-heading);
		font-family: var(--ff-heading);
		font-weight: bold;
		transition:
			background-color 0.3s ease,
			color 0.3s ease;

		&:hover {
			background-color: hsl(var(--clr-bg-alt) / 1);
			color: hsl(var(--clr-accent) / 1);
		}
	}
}

main {
	padding-block: 1.25rem;
}

section:not(:last-child) {
	margin-block-end: 2.5rem;

	:last-child {
		margin-block-end: 0;
	}
}

h1 {
	color: hsl(var(--clr-accent) / 1);
	font-size: var(--fs-heading);
	font-family: var(--ff-heading);
	margin-block-start: 0;
	margin-block-end: 1rem;
	line-height: 1;
}

p {
	color: hsl(var(--clr-text) / 1);
	font-size: var(--fs-body);
	font-family: var(--ff-body);
	margin-block-start: 0;
	margin-block-end: 1rem;
}

footer {
	background-color: hsl(var(--clr-bg-alt) / 1);
	padding-block: 1.5rem;

	.container {
		display: flex;
		flex-direction: row;
		align-items: start;
		gap: 2rem;
	}

	img {
		width: 150px;
		aspect-ratio: 1 / 1;
		box-shadow: hsl(var(--clr-accent) / 1) 0.5rem 0.5rem 0px;

		&::after {
			content: "";
			display: block;
			width: 150px;
			aspect-ratio: 1 / 1;
		}
	}

	h2 {
		color: hsl(var(--clr-text) / 1);
		font-size: var(--fs-body);
		font-family: var(--ff-body);
		margin-block-start: 0;
		margin-block-end: 0.25rem;
	}

	p {
		margin-block-end: 0.25rem;
	}

	a {
		color: hsl(var(--clr-text) / 1);
		text-decoration: none;
		border-block-end: 2px solid hsl(var(--clr-accent) / 1);
		transition: color 0.3s ease;

		&:hover {
			color: hsl(var(--clr-accent) / 1);
		}
	}
}

.contact {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.container {
	max-width: 800px;
	margin: 0 auto;
	padding-inline: 1.25rem;
}

.headshot {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.headshot-img {
	max-width: 100%;
	display: block;
	margin: 0 auto;
}

.blockquote {
	&:not(:last-child) {
		margin-block-end: 1.5rem;
	}

	p {
		margin-block-end: 0;
	}

	.blockquote-quote {
		display: flex;
		flex-direction: row;
		gap: 1rem;
		margin-block-end: 1rem;

		p {
			font-style: italic;
		}
	}

	.blockquote-bar {
		width: 0.125rem;
		background-color: hsl(var(--clr-text) / 1);
		flex-shrink: 0;
	}
}

@media screen and (min-width: calc(520px + 2.5rem)) {
	main {
		padding-block: 2.5rem;
	}

	.headshot {
		flex-direction: row;
		align-items: start;

		img {
			max-width: 260px;
		}
	}

	.headshot-about {
		flex: 1;
	}

	.contact {
		flex-direction: row;
		gap: 1.5rem;
	}

	footer .container {
		padding-block-end: 0.5rem;
	}
}