@font-face {
	font-family: "CustomFont";
	font-display: swap;
	src: url("fonts/ComicJens.ttf") format("truetype");
}

body {	
    margin:0px;
	min-height: 100%;
	background: linear-gradient(Black, MidnightBlue 10%);
}

.header {
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
	background: linear-gradient(rgba(0,0,0,0) 99%, Brown);
	text-align: center;
	padding-left: 4%;
	padding-right: 4%;
	padding-top: 2%;
	padding-bottom: 2%;
	overflow-x: hidden;
}

.logo {
	width: 100%;
}

.logoTile {
	width: 20%;
	position: absolute;
	left: 50%;
	top: 20%;
}

.logoTile:hover {
	opacity: 0.8;
}

.contentBackground {
	position: fixed;
	width: 100%;
	height: 100%;
	background: linear-gradient(Black 50%, MidnightBlue);
	z-index: -1;
}

.content {
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
	border-radius: 8px 8px 0px 0px;
	padding: 4%;
}

.panel {
	background: linear-gradient(black, MidnightBlue, black);
	border-radius: 8px;
	padding: 4%;
}

.panelCenter {
	width: 100%;
	height: 100%;
	text-align: center;
}

p {
	font-family: CustomFont;
	color: Snow;
	margin: 0px;
}

.newline {
	width: 20%;
}

.tile {
	width: 40%;
}

.tile:hover {
	opacity: 0.7;
}

.link {
	position: fixed; 
	right: 0%; 
	top: 0%;
}

.link:hover {
	opacity: 0.7;
}

.impressum {
	font-family: CustomFont;
	color: Gray;
	text-decoration: none;
	margin-right: 16px;
}

.impressum:hover {
	opacity: 0.7;
}

@media only screen and (min-width: 992px) {
    .header {
        padding-left: 2%;
		padding-right: 2%;
		padding-top: 1%;
		padding-bottom: 1%;
	}

	.content {
		padding: 2%;
	}
	
	.panel {
		padding: 2%;
	}

	.logo {
		width: 50%
	}
	
	.logoTile {
		width: 10%;
		left: 50%;
	    top: 20%;
	}
	
	.newline {
		width: 10%;
	}

	.tile {
		width: 20%;
	}
}

@media all and (orientation:landscape) {
	body {
		background: linear-gradient(Black, MidnightBlue 20%);
	}
	
	.newline {
		width: 5%;
	}
	
	.newlineDiv {
		display:inline;
	}
	
	.tile {
		width: 14%
	}
}

@media only screen and (min-width: 2500px) {
	p {
		font-size: 150%;
	}
}

@media only screen and (min-width: 3000px) {
	p {
		font-size: 200%;
	}
}

@media only screen and (min-width: 3500px) {
	p {
		font-size: 250%;
	}
}

@media only screen and (min-width: 3800px) {
	p {
		font-size: 280%;
	}
}

@media only screen and (min-width: 4000px) {
	p {
		font-size: 300%;
	}
}

@media only screen and (min-width: 4500px) {
	p {
		font-size: 350%;
	}
}

@media only screen and (min-width: 5000px) {
	p {
		font-size: 400%;
	}
}

@media only screen and (min-width: 5500px) {
	p {
		font-size: 450%;
	}
}

@media only screen and (min-width: 6000px) {
	p {
		font-size: 500%;
	}
}

@media only screen and (min-width: 6500px) {
	p {
		font-size: 550%;
	}
}

@media only screen and (min-width: 7000px) {
	p {
		font-size: 600%;
	}
}

@media only screen and (min-width: 7500px) {
	p {
		font-size: 650%;
	}
}

@media only screen and (min-width: 8000px) {
	p {
		font-size: 700%;
	}
}