#hero { height: unset; }
#hero > div {
	position: absolute;
	margin: auto;
	background-color: #FFFB;
	text-shadow: 0 0 20px var(--shadowcolor), 0 0 20px var(--shadowcolor);
	
	justify-content: center; 
	font-size: 28px;
	padding: 0 100px;
}
[data-theme="dark"] #hero > div {
	background-color: #0009;
	box-shadow: 5px 0 30px 30px #FFFB;
}
#hero > div > h2 { font-weight: 700; }

#hero > img {
	padding: unset;
	width: 100%;
	max-width: unset;
	margin-left: unset;
	position: relative;
	align-content: end;
	max-height: 500px;
	object-fit: cover;
}

@media (max-width: 900px) {	
	#hero > div { font-size: 22px; padding: 0; }
}

.infodiv > h2 { color: var(--mainblue); }
.infodiv > p { font-size: 16px; margin-bottom: 30px; }
.infodiv > p > a { color: darkcyan; }
.infodiv > div { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 10px; }