#tron{
	height: 100vh;
	width: 100vw;
	display: flex;
	justify-content: center; /* Zentriert horizontal */
	align-items: center;    /* Zentriert vertikal */
}
#titletext{
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-size: 5.5em;
	text-shadow: 3px 3px 8px rgb(90, 90, 90);
	animation: linear infinite normal;
	animation-name: titletexta;
	animation-duration: 5s;
}
body {
	height: 100vh; /* Fallback für andere Browser */
	height: calc(var(--vh, 1vh) * 100); /* Dynamische Höhe für Safari */
	width: 100vw;
	overflow: hidden;
}
#fitzel1{
	left: -145px;
	top: -160px;
	position:absolute;
	transform: rotate(135deg);
	animation: linear infinite normal;
	animation-name: fitzel1a;
	animation-duration: 20s;
}
#fitzel1-1{
	right: -145px;
	top: -160px;
	position:absolute;
	transform: rotate(225deg);
	animation: linear infinite normal;
	animation-name: fitzel1-1a;
	animation-duration: 20s;
	animation-delay: 10s;
}
#fitzel2{
	position:absolute;
	bottom: 0px;
	animation: linear infinite normal;
	animation-name: fitzel2a;
	animation-duration: 10s;
}
#fitzel3{
	position: absolute;
	top: 0px;
	left: calc(50% - 100px);
	margin-top: 5px;
	animation: cubic-bezier(.68,-0.55,.27,1.55) infinite normal;
	animation-name: fitzel3a;
	animation-duration: 10s;
	animation-direction: reverse;
}
#fitzel3>img {
	width: 200px;
	animation: cubic-bezier(.68,-0.55,.27,1.55) infinite normal;
	animation-name: fitzel3a;
	animation-duration: 3s;
}

@keyframes fitzel1a {
	0% {
		left: -145px;
		top: -160px;
	}
	20% {
		left: -10px;
		top: -20px;
	}
	30% {
		left: -10px;
		top: -20px;
	}
	50% {
		left: -145px;
		top: -160px;
	}
}
@keyframes fitzel1-1a {
	0% {
		right: -145px;
		top: -160px;
	}
	20% {
		right: -10px;
		top: -20px;
	}
	30% {
		right: -10px;
		top: -20px;
	}
	50% {
		right: -145px;
		top: -160px;
	}
}

@keyframes fitzel2a {
	0% {
		left: -160;
	}
	5% {
		bottom: -20px;
		transform: scaleX(0.9);
	}
	10% {
		bottom: -5px;
		transform: scaleX(1);
	}
	15% {
		bottom: -20px;
		transform: scaleX(0.9);
	}
	20% {
		bottom: -5px;
		transform: scaleX(1);
	}
	25% {
		bottom: -20px;
		transform: scaleX(0.9);
	}
	30% {
		bottom: -5px;
		transform: scaleX(1);
	}
	35% {
		bottom: -20px;
		transform: scaleX(0.9);
	}
	40% {
		bottom: -5px;
		transform: scaleX(1);
	}
	45% {
		bottom: -20px;
		transform: scaleX(0.9);
	}
	50% {
		bottom: -5px;
		transform: scaleX(1);
	}
	55% {
		bottom: -20px;
		transform: scaleX(0.9);
	}
	60% {
		bottom: -5px;
		transform: scaleX(1);
	}
	65% {
		bottom: -20px;
		transform: scaleX(0.9);
	}
	70% {
		bottom: -5px;
		transform: scaleX(1);
	}
	75% {
		bottom: -20px;
		transform: scaleX(0.9);
	}
	80% {
		bottom: -5px;
		transform: scaleX(1);
	}
	85% {
		bottom: -20px;
		transform: scaleX(0.9);
	}
	90% {
		bottom: -5px;
		transform: scaleX(1);
	}
	95% {
		bottom: -20px;
		transform: scaleX(0.9);
	}
	100% {
		left: 100%;
		bottom: -5px;
		transform: scaleX(1);
	}
}

@keyframes fitzel3a {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(359deg);
	}
}
@keyframes titletexta {
	0% {
		filter: contrast(100%);
		transform:scale(1);
	}
	5% {
		filter: contrast(0%);
		transform:scale(1.4);
	}
	10% {
		filter: contrast(100%);
		transform:scale(1);
	}
	15% {
		filter: contrast(0%);
		transform:scale(1.4);
	}
	20% {
		filter: contrast(100%);
		transform:scale(1);
	}
}