/* Homepage hero */
.blurredShadow {
	position: relative;
	text-align: center;
	height: 25rem;
	display: grid;
	align-content: center;
	border-radius: 0.8rem;
	outline: 3px solid #ffffff1c;
	outline-offset: -8px;
	transition: outline 0.3s var(--ease);
}

.blurredShadow::before, .blurredShadow::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: var(--background);
	background-size: cover;
	background-position: center;
	filter: blur(10px);
	transition:
		filter 0.3s var(--ease),
		border-radius 0.2s;
	z-index: -1;
	border-radius: 0.5rem;
}


#hero.heroShow::after {
	filter: blur(0);
	border-radius: 0.5rem;
}

#hero h1,
#hero a {
	color: var(--darkest1);
	text-shadow: 0 0 0.6rem var(--darkest4);
	margin: 0;
	opacity: 1;
	scale: 1;
	transition:
		opacity 0.1s ease,
		scale 0.5s var(--ease);
}
#hero h1 { font-size: 3rem; }
#hero a {
	font-size: 15px;
	padding-bottom: 0.5rem;
}

#hero span {
	cursor: pointer;
	position: absolute;
	padding: 0.5rem;
	font-family: var(--primaryFont);
	font-size: 1rem;
	line-height: 1;
	color: black;
	width: max-content;
	text-align: left;
	transition: background-color 0.1s var(--ease);
	background-color: transparent;
	border-radius: 0 0 0 0.3rem;
	bottom: 8px;
	left: 8px;
}
#hero.heroShow span {
	background-color: #ffffff7c;
}
#hero.heroShow {
	outline: 3px solid #ffffff7c;
}

#hero img {
	filter: invert(100%);
	transition: filter .2s var(--ease);
}
#hero.heroShow img, #hero:not(.invertColors) img { filter: invert(0%); }
#hero span span {
	border-radius: 0 0.5rem 0 0;
	color: black;
	bottom: 0;
	opacity: 0;
	left: -5px;
	transition:
		left 0.1s var(--ease),
		opacity 0.2s var(--ease);
}

#hero.heroShow span span {
	left: 2rem;
	opacity: 1;
}

#hero.heroShow h1,
#hero.heroShow a {
	opacity: 0;
	scale: 0.95;
}

#hero.invertColors h1,
#hero.invertColors a {
	color: var(--lightest1) !important;
	text-shadow: 0 0 1rem white;
}

#hero:not(.invertColors) a {
	color: var(--darkest1);
}

#hero a:hover {
	text-decoration: underline;
}

.blurredShadow::before {
	filter: blur(1rem);
}

#featured {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
#featured a { width: fit-content; }
#featured::after {
	filter: blur(2px);
	border-radius: 0.5rem;
	padding: 1rem;
}
#featured h2 {
	z-index: 2;
	font-size: 3rem;
}