:root {
	font-family: Inter, sans-serif;
	font-feature-settings: 'liga' 1, 'calt' 1;
	/* fix for Chrome */
}

@supports (font-variation-settings: normal) {
	:root {
		font-family: InterVariable, sans-serif;
	}
}

body {
	position: relative;
	justify-content: center;
	background-color: #EEEEEE;
	line-height: 1.4;
}

h1,
h2 {
	line-height: 1.2;
	font-size: 50px;
	padding-top: 0px;
	margin-top: 0px;
}

.workHeader {
	border-bottom: 2px solid black;
	font-size: 26px;
	margin: 0px;
	margin-top: 10px;
	margin-left: 25px;
	margin-right: 25px;
	padding-left: 25px;
}

.contactHeader {
	font-size: 35px;
	margin: 0px;
	margin-top: 10px;
	margin-left: 25px;
	margin-right: 25px;
	padding-left: 25px;
}

nav {
	display: grid;
	align-content: center;
	grid-template-areas:
		"nav1 nav2 nav3 nav4";
	grid-template-columns: auto auto auto auto;
	grid-template-rows: auto;
	font-size: 24px;
	margin-bottom: 0px;
	margin-left: 10%;
	margin-right: 10%;
	padding-bottom: 0px;
	padding-top: 10px;

	a:link {
		text-decoration: none;
		color: grey;
	}

	a:visited {
		text-decoration: none;
		color: grey;
	}

	a:hover {
		text-decoration: none;
		color: red;
		animation-name: linkAnimation;
		animation-duration: 0.5s;
		animation-fill-mode: forwards;
	}
}

p {
	font-size: 26px;
	margin-top: 0px;
	max-width: 1000px;
	padding: 10px;
	padding-left: 60px;
	padding-right: 60px;

}

.toolsCap {
	font-size: 16px;
	color: rgb(104, 104, 104);
	margin-top: 0px;
	max-width: 1000px;
	margin-bottom: 0px;
	padding-left: 60px;
	padding-right: 60px;
}

.mainContent {
	overflow: auto;
	background-color: #b4b4b43b;
	width: 60%;
	margin: auto;
	border-radius: 15px;
}

.headshot {
	clip-path: circle(40% at 50% 50%);
	float: right;
	margin-right: 0px;
	margin-bottom: 10px;
}

.flyin {
	animation: flyAnimation ease-in-out 1.0s forwards;
}

/*Site fly-in animation*/
@keyframes flyAnimation {
	from {
		transform: translateY(5vw);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 100;
	}
}

/*Animation for hovered links*/
@keyframes linkAnimation {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(1.2);
	}
}

/*End of animation section*/

.contactList {
	font-size: 28px;
	list-style-type: disc;
}

li {
	margin-left: 0px;
}

/*For link in works*/
a:link {
	color: rgb(171, 98, 98);
}

a:visited {
	color: rgb(171, 98, 98);
}

details {
	margin-top: 0px;
	padding-top: 0px;
}

summary {
	font-size: 26px;
	margin: 0px;
	color: rgb(171, 98, 98);
	display: flex;
	justify-content: center;
}

#floated {
	float: right;
}

.inline_img {
	margin-top: 10px;
	margin-bottom: 10px;
	width: 700px;
	height: 500px;
	border: 3px groove black;
}

.centered_a {
	display: flex;
	justify-content: center;
	font-size: 24px;
}

/*MOBILE FONT SIZE ADJUSTMENT*/
@media (max-width: 600px) {
	p {
		font-size: 20px;
	}

	.mainContent {
		width: 100%;
	}

	.headshot {
		float: right;

	}

	.inline_img {
		width: 500px;
		height: 400px;
	}

	nav {
		margin-left: 20px;
		margin-right: 20px;
	}
}