@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
	--off-black: #332e35;
	--off-white: #faf3e5;
}

html {
	color: var(--off-black);
	background-color: var(--off-white);
	font-family: 'Atkinson Hyperlegible';
	font-size: 22px;
}

header {
	text-align: center;
	font-size: 120%;
	margin: 1em;
	padding: 1em;
	background-color: #0001;
	border-radius: 1em;
}

nav {
	display: flex;
	gap: 1em;
	justify-content: center;
}

main {
	max-width: 960px;
	margin: auto;
	line-height: 2;

	& img {
		width: 100%;
	}
}

a {
	color: #a03c69;
	text-decoration: none;
}

a:visited {
	color: #83254f;
}

a:hover {
	text-decoration: underline;
}

footer {
	padding: 2em;
}

.highlight {
	background-color: #83254f33;
}

.boxes {
	display: flex;
	gap: 1em;
	justify-content: center;

	& a {
		border: 2px solid var(--off-black);
		flex: 1;
		padding: 1em;
		border-radius: 1em;
		transition: transform .3s;

		&:hover {
			transform: translateY(-.3em);
		}
	}
}

.resume {
	border: 2px solid var(--off-black);
	border-radius: 1em;
	padding: 1em;
	max-width: 800px;
	margin: auto;

	& img {
		float: right;
		height: 260px;
		margin: 0 1em 1em 0
	}

	& .highlight {
		transition: all .3s;
		cursor: pointer;
	}
}