body {
	margin: 0;
	min-width: 100vw;
	min-height: 100vh;
	background-color: rgba(245, 239, 237, 1);
	display: flex;
	justify-content: center;
}

/* ////// Typography ////// */

h1 {
	font-family: "Libre Franklin", Helvetica, Arial;
	font-size: 72px;
	text-align: center;
	color: rgba(51, 158, 64, 1);
	padding: 0%;
	margin: 0%;
}

p {
	font-family: "Libre Franklin", Helvetica, Arial;
	font-size: 24px;
	text-align: center;
	color: black;
}

a {
	font-family: "Libre Franklin", Helvetica, Arial;
	font-size: 24px;
	display: flex;
	justify-content: center;
	color: black;
}

a:hover {
	font-family: "Libre Franklin", Helvetica, Arial;
	font-size: 24px;
	display: flex;
	justify-content: center;
	color: rgba(51, 158, 64, 1);
}

.written-content .link:hover {
	animation-name: scale-up;
	animation-duration: 0.5s;
	animation-iteration-count: infinite;
}

/* ////// Layout ////// */

.content-border {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0vh 10vw;
}

.logo-headshot {
	display: flex;
	flex-direction: row;
	position: relative;
	width: 45vw;
	min-height: 30vw;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: -3vw;
}

.logo {
	width: 25vw;
	display: flex;
	position: absolute;
	padding-bottom: 20vh;
	z-index: 1;
	left: 0;
}

.logo img {
	position: absolute;
	top: 0;
	right: 0;
}

.headshot {
	position: absolute;
	z-index: 0;
	right: 0;
}

.headshot img {
	width: 25vw;
	height: 25vw;
	border-radius: 50%;
}

.links {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.links a {
	text-decoration: none;
	font-size: 3em;
	padding: 0.25em;
}

/* ////// Animations /////// */

@keyframes scale-up {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(1);
	}
}

.letter-z {
	animation-name: reveal1;
	animation-duration: 400ms;
	animation-timing-function: ease-in;
	animation-fill-mode: both;
}

.letter-a {
	animation-name: reveal1;
	animation-duration: 400ms;
	animation-timing-function: ease-in;
	animation-fill-mode: both;
	animation-delay: 100ms;
}

.letter-c {
	animation-name: reveal1;
	animation-duration: 400ms;
	animation-timing-function: ease-in;
	animation-fill-mode: both;
	animation-delay: 200ms;
}

.letter-h {
	animation-name: reveal1;
	animation-duration: 400ms;
	animation-timing-function: ease-in;
	animation-fill-mode: both;
	animation-delay: 300ms;
}

@keyframes reveal1 {
	0% {
		transform: translateX(10vw);
		opacity: 0;
	}

	100% {
		transform: translateX(0vw);
		opacity: 1;
	}
}

.headshot {
	animation-name: reveal2;
	animation-duration: 400ms;
	animation-timing-function: ease-in;
	animation-fill-mode: both;
	animation-delay: 950ms;
}

@keyframes reveal2 {
	0% {
		transform: translateX(-10vw);
		opacity: 0;
	}

	100% {
		transform: translateX(0vw);
		opacity: 1;
	}
}

.logo {
	animation-name: push-right;
	animation-delay: 700ms;
	animation-duration: 500ms;
	animation-fill-mode: both;
	animation-timing-function: ease-in;
}

/* defines the style that moves the logo to the right slightly to "bump" the headshot. */

@keyframes push-right {
	0% {
		transform: translateX(0vw);
	}

	50% {
		transform: translateX(1vw);
	}

	100% {
		transform: translateX(0vw);
	}
}

/* applies the slide up animation to the written content. staggered delays allow the items to show up in staggered order. */
.written-content h1 {
	animation-name: slide-up;
	animation-duration: 300ms;
	animation-delay: 1200ms;
	animation-fill-mode: both;
	animation-timing-function: ease-in;
}

.written-content p {
	animation-name: slide-up;
	animation-duration: 300ms;
	animation-delay: 1300ms;
	animation-fill-mode: both;
	animation-timing-function: ease-in;
}

.written-content .links {
	animation-name: slide-up;
	animation-duration: 300ms;
	animation-delay: 1400ms;
	animation-fill-mode: both;
	animation-timing-function: ease-in;
}

/* defines the rules for the slide up animation. */
@keyframes slide-up {
	0% {
		transform: translateY(5vw);
		opacity: 0;
	}

	100% {
		transform: translateY(0vw);
		opacity: 1;
	}
}