* {
	font-family: sans-serif;
	margin: 0;
	padding: 0;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-khtml-user-select: none;
}
body {
	width: 100vw;
	height: 100vh;
	padding-top: env(safe-area-inset-top);
	background-image: url("/assets/img/hintergrund/hintergrund.jpg");
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-image: -webkit-image-set(
		url("/assets/img/hintergrund/hintergrund.avif") type("image/avif"),
		url("/assets/img/hintergrund/hintergrund.webp") type("image/webp"),
		url("/assets/img/hintergrund/hintergrund.jpg") type("image/jpeg")
	);
	background-image: image-set(
		url("/assets/img/hintergrund/hintergrund.avif") type("image/avif"),
		url("/assets/img/hintergrund/hintergrund.webp") type("image/webp"),
		url("/assets/img/hintergrund/hintergrund.jpg") type("image/jpeg")
	);
}
div.konfetti {
	position: absolute;
	left: 5vw;
	top: calc( 5vw + env(safe-area-inset-top));
	width: 20vw;
	height: 20vw;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("/assets/img/konfetti/konfetti.png");
	background-image: -webkit-image-set(
		url("/assets/img/konfetti/konfetti.avif") type("image/avif"),
		url("/assets/img/konfetti/konfetti.webp") type("image/webp"),
		url("/assets/img/konfetti/konfetti.webp") type("image/png")
	);
	background-image: image-set(
		url("/assets/img/konfetti/konfetti.avif") type("image/avif"),
		url("/assets/img/konfetti/konfetti.webp") type("image/webp"),
		url("/assets/img/konfetti/konfetti.webp") type("image/png")
	);
}
picture.waggis {
	z-index: 999;
	display: block;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100vw;
	height: 80vh;
}
picture.waggis img {
	position: relative;
	max-width: fit-content;
	max-height: 110%;
	top: -10%;
	left: 52.5%;
	transform: translateX(-52.5%);
}
picture.mikehell {
	z-index: 99999;
	display: block;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 50vw;
	height: 22vw;
	text-align: left;
}
picture.fithwordev {
	z-index: 99999;
	display: block;
	position: fixed;
	right: 0;
	bottom: 0;
	width: 50vw;
	height: 22vw;
	text-align: right;
}
picture img {
	max-width: 100%;
	max-height: 100%;
}

.vibrate {
	-webkit-animation: vibrate 2s cubic-bezier(0.445, 0.050, 0.550, 0.950) infinite both;
			animation: vibrate 2s cubic-bezier(0.445, 0.050, 0.550, 0.950) infinite both;
}

/* animation vibrate-1 */
@-webkit-keyframes vibrate {
	0% {
		-webkit-transform: translate(0);
				transform: translate(0);
	}
	5% {
		-webkit-transform: translate(-2px, 2px);
				transform: translate(-2px, 2px);
	}
	10% {
		-webkit-transform: translate(-2px, -2px);
				transform: translate(-2px, -2px);
	}
	15% {
		-webkit-transform: translate(2px, 2px);
				transform: translate(2px, 2px);
	}
	20% {
		-webkit-transform: translate(2px, -2px);
				transform: translate(2px, -2px);
	}
	25% {
		-webkit-transform: translate(0);
				transform: translate(0);
	}
	100% {
		-webkit-transform: translate(0);
				transform: translate(0);
	}
}
@keyframes vibrate {
	0% {
		-webkit-transform: translate(0);
				transform: translate(0);
	}
	5% {
		-webkit-transform: translate(-2px, 2px);
				transform: translate(-2px, 2px);
	}
	10% {
		-webkit-transform: translate(-2px, -2px);
				transform: translate(-2px, -2px);
	}
	15% {
		-webkit-transform: translate(2px, 2px);
				transform: translate(2px, 2px);
	}
	20% {
		-webkit-transform: translate(2px, -2px);
				transform: translate(2px, -2px);
	}
	25% {
		-webkit-transform: translate(0);
				transform: translate(0);
	}
	100% {
		-webkit-transform: translate(0);
				transform: translate(0);
	}
}

.slidein {
	-webkit-animation: slidein 2s cubic-bezier(0.860, 0.000, 0.070, 1.000) both;
			animation: slidein 2s cubic-bezier(0.860, 0.000, 0.070, 1.000) both;
}

/* animation slide-in-bottom */
@-webkit-keyframes slidein {
	0% {
		-webkit-transform: translateY(1000px);
				transform: translateY(1000px);
	}
	100% {
		-webkit-transform: translateY(0);
				transform: translateY(0);
	}
}
@keyframes slidein {
	0% {
		-webkit-transform: translateY(1000px);
				transform: translateY(1000px);
	}
	100% {
		-webkit-transform: translateY(0);
				transform: translateY(0);
	}
}

@media (orientation: landscape) {
	picture.waggis {
		height: 100vh;
	}
	picture.waggis img {
		transform: none;
	}
	div.konfetti {
		width: 10vw;
		height: 10vw;
	}
	picture.mikehell, picture.fithwordev {
		width: 50vw;
		height: 10vw;
	}
}