:root {
	--primary: #05f385; /* Background/Headers */
	--secondary: #212529; /* Panels/Sections */
	--lightest: #f8f8ff; /* text/highlights */
}

.hero {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
	filter: drop-shadow(3px 3px 2px black);
}

.hero > p:first-child {
	font-size: 1.8em;
	color: var(--primary);
	opacity: 0;
	transform: translateY(-100%);
	animation: slideIn 1.5s ease forwards;
}

.hero > p:nth-child(2) {
	color: var(--lightest);
	font-size: 1.5em;
	opacity: 0;
	transform: translateY(100%);
	animation: slideIn 2.5s ease forwards;
	font-family: "Montserrat", sans-serif;
}

.hero > a {
	margin-top: 15px;
}

.heroBtn {
	padding: 0.7em;
	background-color: var(--primary);
	border: none;
	border-radius: 5px;
	color: var(--secondary) !important;
	font-size: 0.8em !important;
	opacity: 0;
	transform: translateY(100%);
	animation: slideIn 2.5s ease forwards;
}

.heroBtn:hover {
	opacity: 0.7 !important;
}

@keyframes slideIn {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}