html, body {
	height: 100%;
	margin: 0;
	display: flex;
	flex-direction: column;
}

body {
	background-color: white;
	font-family: Arial;
	color: black;
	font-size: 18px;
	-webkit-transform: translateZ(0);
	/*
		/|\
		 |
		Trickt den Browser, ein Repaint durchzuführen
		(Für WebKit-basierte Browser wie Chrome und Safari)
	*/
	transform: translateZ(0); /* Standardisierte CSS-Eigenschaft */
	height: 100%;
}

header {
	background-color: white;
	padding: 20px;
	text-align: left;
	font-size: 25px;
	color: rgb(80, 120, 146);
}

@media screen and (max-width: 5700px) {
	h1 {
		font-size: 40px;
		text-align: start;
	}
}

.homepage-link {
	display: flex;
	font-style: inherit;
	text-decoration: none;
	justify-content: space-between;
	align-items: center;
}

@media screen and (max-width: 900px) {
	.homepage-link {
		flex-direction: column;
	}
	.homepage-link h1 {
		text-align: center;
	}
	.logo {
		order: -1;
	}
	main{
		text-align: center;
		border-width: 0px;
		min-height: 500px;
	}
	footer {
		display: block;
	}
}

.logo {
	width: auto;
	max-width: 100%;
	height: 150px;
}

main {
	flex: 1;
	align-items: center;
	text-align: center;
	margin: auto;
	
	padding-left: 10px;
	padding-right: 10px;
	
	padding-bottom: 100px;
	max-width: max-content;
	/* min-height: calc(100vh - 170px); */
	min-height: 300px;
}

main::after {
	content: "";
	display: block;
	clear: both;
}

footer {
	background-color: rgb(80, 120, 146);
	text-align: center;
	color: white;
	font-size: 15px;
	width: 100%;
	margin-top: auto;
	display: block;
	will-change: transform;
	margin-bottom: 0;
}

@supports (-webkit-touch-callout: none) {
	.main {
		padding-bottom: 120px;
	}
	.footer {
		position: relative;
		margin-top: auto;
	}
}

.button-group {
	display: flex;
	justify-content: space-around;
}

.button {
	background-color: rgb(80, 120, 146);
	color: white;
	width: 20%;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: bold;
	cursor: pointer;
	border: 5px solid rgb(80, 120, 146);
}

.button:hover {
	background-color: white;
	color: rgb(139, 0, 0);
	border: 5px solid rgb(139, 0, 0);
}

.button.aktiv {
	color: rgb(139, 0, 0);
	border: 5px solid rgb(139, 0, 0);
	background-color: white;
}

@media screen and (max-width: 900px) {
	.button-group {
		flex-direction: column;
		align-items: center;
	}

	.button {
		margin-bottom: 10px;
		width: 30%;
	}

	.button:last-child {
		margin-bottom: 0;
	}
}

@media screen and (max-width: 720px) {
	.button-group {
		flex-direction: column;
		align-items: center;
	}

	.button {
		margin-bottom: 10px;
		width: 40%;
	}

	.button:last-child {
		margin-bottom: 0;
	}

	main {
		min-height: 500px;
	}
}

@media screen and (max-width: 570px) {
	.button-group {
		flex-direction: column;
		align-items: center;
	}

	.button {
		margin-bottom: 10px;
		width: 70%;
	}

	.button:last-child {
		margin-bottom: 0;
	}

	main {
		min-height: 600px;
	}
}

.project-list {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	text-align: left;
}

.project-list h5 {
	text-align: center;
}