html {scroll-behavior: smooth;}
body {/*Background*/
	background: linear-gradient(#77F, #0F0);
	background-attachment: fixed;
	background-size: contain;
	height: 100%;
}
/* Fonts*/
nav, header, main, footer {font-family: sans-serif; font-style: normal;}
/*Navigationsleiste*/
nav {
	position: fixed;
	top: 10px;
	width: 90%;
	left: 5%;
	height: 54px;
	z-index: 1;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 30px;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
nav > ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: flex;
}
nav > ul > li {
	flex-basis: 100%;
}
nav > ul > li > a, nav > ul > li > a:hover {
	text-align: center;
	display: block;/*Vertikal Zentriert, ganzes Feld klickbar*/
	font-weight: bold;
	text-decoration: none;
	padding: 16px 0;
	font-size: 1.2em;
	color: #000;
	letter-spacing: 1.5px;
}
nav > ul > li > a:hover, nav > ul > li > a:active {text-decoration: underline}

@media screen and (max-width: 400px) {
	nav > ul > li > a, nav > ul > li > a:hover {padding: 17px 0; font-size: 1em; letter-spacing: initial;}
}
header {
	background-image: url("/j/title.svg");
	height: 280px;
	top: 0;
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
}
@media screen and (max-device-width: 950px) {
	header {height: 180px;}
	h1 {font-size: 1.8em; top: 20%;}
}

@media screen and (max-width: 400px) {
	nav > ul > li > a {padding: 17px 0; font-size: 1em; letter-spacing: 0px;}
}

main {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	padding-top: 50px;
}
main > section {
	background-color: #f1f1f1;
	margin: 10px;
	padding: 20px;
	font-size: 30px;
	border-radius: 10px;
}