@font-face {
  font-family: 'Fira Sans';
  src: url(FiraSans-Light.ttf);
}

@font-face {
  font-family: 'Fira Sans';
  src: url(FiraSans-ExtraBold.ttf);
  font-weight: bold;
}
body, html {
	height: 100%;
	margin: 0;
	padding: 0;
	font-size: 26px;
}

main {
	background-image: url("./eric-lynn-cover.png");
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding: 1.5rem 4rem;
	box-sizing: border-box;
	justify-content: space-between;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
img {
	padding-top: 0.5rem;
}
@media screen and (max-width: 500px) {
	body, html {
		font-size: 16px;
	}
	main {
		padding: 1rem 2rem;
	}

}
.top-content, .bottom-content {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.bottom-content {
	flex-wrap: wrap;
}
p {
	font-family: 'Fira Sans';
	letter-spacing: -0.2px;
}
p strong {
	letter-spacing: 0.4px;
}
p span {
	padding: 0.1rem 0.2rem;
}
.top-content p span {
	background: #d8dcf1;
}
.center-content p span {
	background: #d5e5e4;
}
.bottom-content p span {
	background: #b1c4c6;
}
@media screen and (max-width: 600px) {
	.top-content {
		flex-direction: column;
	}
	.top-content p {
		order: 2;
	}
	.top-content img {
		transform: scale(0.75);
		order: 1;
		align-self: center;
	}
}