* {
	scroll-behavior: smooth;
	background-color: #3E3E4E;
	font-family: monospace;
	margin: 0px;
}

html { 
	display: flex;
	align-items: center;
	justify-content: center;
}

header {
	position: fixed;
	display: grid;
	width: min(75vw, 1225px);
	grid-template-columns: min(12.5vw, 175px) min(37.5vw, 525px) min(37.5vw, 525px);
	height: min(12.5vw, 175px);
	background-color: #2E2E3E;
}

.placeholder {
	height: min(12.5vw, 175px);
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	background-color: #2E2E3E;
}

main {
	width: min(100vw, 1400px);
}

h1, h2, h3{
	background-color: #2E2E3E;
	color: #CCCCCC;
	height: min(6.25vw, 87.5px);
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-size: max(2vw, 12px);
}

h1 {
	justify-content: left;
	height: min(12.5vw, 175px);
	grid-column: span 2;
	font-size: max(3vw, 20px);
}

h3 {
	background-color: #5B5B7D;
	font-size: max(2vw, 12px);
}

img, video {
	height: min(12.5vw, 175px);
}

p {
	background-color: #CCCCCC;
	color: #2E2E3E;
	height: min(6.25vw, 87.5px);
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-size: max(1.5vw, 10px);
}

a {
	background-color: #CCCCCC;
	color: #2E2E3E;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-size: max(1.5vw, 10px);
}

.Fotos {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.Kooperationen{
	width: 100%;
	height: min(6.25vw, 87.5px);
	background-color: #CCCCCC;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr;
	padding: 10px 0px;
}

.Kooperationen img {
	background-color: #FFFFFF00;
}

.Socials{
	width: calc(100% - 20px);
	height: min(6.25vw, 87.5px);
	background-color: #CCCCCC;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	padding: 10px;
}

.Social {
	background-color: #CCCCCC;
	height: min(6.5vw, 87.5px);
}

.Videos {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.Video {
	display: flex;
}

#A {flex-direction: row;}
#B {flex-direction: row;}
#C {flex-direction: row-reverse;}
#D {flex-direction: row-reverse;}
#E {flex-direction: row;}
#F {flex-direction: row;}
#G {flex-direction: row-reverse;}
#H {flex-direction: row-reverse;}

.videotitle {
	height: min(12.5vw, 175px);
	width: min(12.5vw, 175px);
	text-align: center;
}

.Logos {
	height: min(6.5vw, 87.5px);
	background-color: #CCCCCC;
	display: flex;
	justify-content: center;
}

.Links {
	height: min(6.5vw, 87.5px);
	background-color: #CCCCCC;
}

@media only screen and (max-width: 700px) {
	header, .Fotos{
		grid-template-columns: 25vw 25vw 25vw 25vw;
	}

	header, h1, img, video, .videotitle, .placeholder {
		height: 25vw;
	}

	.videotitle {
		width: 25vw;
		font-size: 2vw;
	}

	.Videos {
		display: flex;
		flex-direction: column;
	}

	#A {flex-direction: row;}
	#B {flex-direction: row-reverse;}
	#C {flex-direction: row;}
	#D {flex-direction: row-reverse;}
	#E {flex-direction: row;}
	#F {flex-direction: row-reverse;}
	#G {flex-direction: row;}
	#H {flex-direction: row-reverse;}

	.Kooperationen{
		height: min(12.5vw, 250px);
		grid-template-columns: 25vw 25vw 25vw 25vw;
		grid-template-rows: 12.5vw;
	}
	.Links {
		height: 12.5vw;
	}
}

@media only screen and (min-width: 1400px) {
	h1 {
		font-size: 40px;
	}
	h2 {
		font-size: 30px;
	}
	h3 {
		font-size: 30px;
	}
	p, a {
		font-size: 20px;
	}
}