* {
	font-family: monospace;
	scroll-behavior: smooth;
	margin: 0px;
}

html{
	background-color: #333333;
	display: flex;
	justify-content: center;
}

main {
	margin-top: 10vh;
	width: min(100vw, 1024px);
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 10vh;
	background-color: #2E2E3E;
	display: flex;
	align-items: center;
}

a {
	text-decoration: none;
	color: #CCCCCC;
}

.Logo {
	height: 10vh;
}

p {
	font-size: large;
}

video {
	height: 100%;
	width: 100%;
}

.Bild {
	background-color: #CCCCCC;
	width: 100%;
	grid-column: span 3;
}

.Bildwide {
	background-color: #CCCCCC;
	width: 100%;
	grid-column: span 6;
}

@media only screen and (min-width: 512px) {
	video {
		grid-column: span 2;
		grid-row: span 2;
	}

	.Bild {
		grid-column: span 2;
	}
}

@media only screen and (min-width: 1024px) {
	video {
		grid-column: span 2;
		grid-row: span 4;
	}

	.Bild {
		grid-column: span 2;
	}
}

.download-button {
	position: fixed;
	bottom: 2vh;
	left: 25vw;
	width: 50vw;
	height: 5vh;
	border-radius: 2vh;
	background-color: #2E2E3E;
	display: flex;
	align-items: center;
	justify-content: center;
}

.download-button:hover {
	background-color: #5B5B7D;
}

.download-button a {
	text-decoration: none;
	color: #CCCCCC;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.login {
	width: 70%;
	margin: 15%;
	display: flex;
	justify-content: center;
	flex-flow: column;
	grid-column: span 6;
}

.passwort {
	margin: 2vh;
	height: 3vh;
	font-size: 2vh;
	border-radius: 1vw;
}

.button {
	height: 3vh;
	font-size: 2vh;
	border-radius: 1vw;
}

.ButtonDownload {
	width: 70%;
	margin: 15%;
	padding: 1vw;
	display: flex;
	text-align: center;
	flex-flow: column;
	grid-column: span 6;
	background-color: #2E2E3E;
	border-radius: 1vw;
}