@font-face {
	font-family: "SuezOne";
	src: url("SuezOne-Regular.ttf") format("truetype");
}

#confetti-wrapper {
	overflow: hidden;
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 9999;
	pointer-events: none;
	/* Verhindert, dass es Klicks abfängt */
}

.confetti {
	width: 15px;
	height: 15px;
	position: absolute;
	left: 50%;
	animation: confetti 5s ease-in-out 1;
	transform-origin: left top;
	font-weight: bold;
	font-size: 35px;
	font-family: "SuezOne";
	text-shadow: 1px 0px 8px rgba(255, 247, 0, 0.64);
}

/* Deine nth-child Styles für Farbe, Position und Animation */
.confetti:nth-child(1) {
	color: #2c3e50;
	left: 5%;
	animation-delay: 0.2s;
	top: 0;
}

.confetti:nth-child(2) {
	color: #34495e;
	left: 10%;
	animation-delay: 0.5s;
	top: 0;
}

.confetti:nth-child(3) {
	color: #2c3e50;
	left: 15%;
	animation-delay: 0.8s;
	top: 0;
}

.confetti:nth-child(4) {
	color: #22313f;
	left: 20%;
	animation-delay: 1.0s;
	top: 0;
}

.confetti:nth-child(5) {
	color: #3a539b;
	left: 25%;
	animation-delay: 1.1s;
	top: 0;
}

.confetti:nth-child(6) {
	color: #1f3a93;
	left: 30%;
	animation-delay: 2.5s;
	top: 0;
}

.confetti:nth-child(7) {
	color: #4b77be;
	left: 35%;
	animation-delay: 2.7s;
	top: 0;
}

.confetti:nth-child(8) {
	color: #1c2833;
	left: 40%;
	animation-delay: 3.0s;
	top: 0;
}

.confetti:nth-child(9) {
	color: #5d6d7e;
	left: 45%;
	animation-delay: 3.3s;
	top: 0;
}

.confetti:nth-child(10) {
	color: #283747;
	left: 50%;
	animation-delay: 0.9s;
	top: 0;
}

.confetti:nth-child(11) {
	color: #1c1c1c;
	left: 55%;
	animation-delay: 2.7s;
	top: 0;
}

.confetti:nth-child(12) {
	color: #212f3d;
	left: 60%;
	animation-delay: 3.6s;
	top: 0;
}

.confetti:nth-child(13) {
	color: #4a235a;
	left: 65%;
	animation-delay: 1.3s;
	top: 0;
}

.confetti:nth-child(14) {
	color: #512e5f;
	left: 70%;
	animation-delay: 0.5s;
	top: 0;
}

.confetti:nth-child(15) {
	color: #154360;
	left: 75%;
	animation-delay: 3.3s;
	top: 0;
}

.confetti:nth-child(16) {
	color: #0b5345;
	left: 80%;
	animation-delay: 2.1s;
	top: 0;
}

.confetti:nth-child(17) {
	color: #145a32;
	left: 85%;
	animation-delay: 1.0s;
	top: 0;
}

.confetti:nth-child(18) {
	color: #186a3b;
	left: 90%;
	animation-delay: 3.9s;
	top: 0;
}

/* Die letzten 18 werden nach oben verschoben (z. B. -200px), sodass sie am Anfang nicht sichtbar sind */

.confetti:nth-child(19) {
	color: #78281f;
	left: 68%;
	animation-delay: 4.6s;
	top: -100px;
}

.confetti:nth-child(20) {
	color: #943126;
	left: 88%;
	animation-delay: 5.1s;
	top: -100px;
}

.confetti:nth-child(21) {
	color: #512e5f;
	left: 50%;
	animation-delay: 6.9s;
	top: -100px;
}

.confetti:nth-child(22) {
	color: #4d5656;
	left: 29%;
	animation-delay: 7.2s;
	top: -100px;
}

.confetti:nth-child(23) {
	color: #2c3e50;
	left: 60%;
	animation-delay: 4.9s;
	top: -100px;
}

.confetti:nth-child(24) {
	color: #1f618d;
	left: 91%;
	animation-delay: 5.8s;
	top: -100px;
}

.confetti:nth-child(25) {
	color: #2e4053;
	left: 15%;
	animation-delay: 6.7s;
	top: -100px;
}

.confetti:nth-child(26) {
	color: #1c2833;
	left: 39%;
	animation-delay: 5.4s;
	top: -100px;
}

.confetti:nth-child(27) {
	color: #17202a;
	left: 81%;
	animation-delay: 7.5s;
	top: -100px;
}

.confetti:nth-child(28) {
	color: #2f3640;
	left: 56%;
	animation-delay: 4.2s;
	top: -100px;
}

.confetti:nth-child(29) {
	color: #212f3c;
	left: 21%;
	animation-delay: 6.4s;
	top: -100px;
}

.confetti:nth-child(30) {
	color: #154360;
	left: 46%;
	animation-delay: 4.3s;
	top: -100px;
}

.confetti:nth-child(31) {
	color: #0b5345;
	left: 94%;
	animation-delay: 7.9s;
	top: -100px;
}

.confetti:nth-child(32) {
	color: #0e6251;
	left: 36%;
	animation-delay: 6.5s;
	top: -100px;
}

.confetti:nth-child(33) {
	color: #6e2c00;
	left: 25%;
	animation-delay: 5.6s;
	top: -100px;
}

.confetti:nth-child(34) {
	color: #873600;
	left: 71%;
	animation-delay: 4.7s;
	top: -100px;
}

.confetti:nth-child(35) {
	color: #5b2c6f;
	left: 63%;
	animation-delay: 7.2s;
	top: -100px;
}

.confetti:nth-child(36) {
	color: #512e5f;
	left: 84%;
	animation-delay: 4.9s;
	top: -100px;
}

@keyframes confetti {
	0% {
		transform: rotateZ(15deg) rotateY(0deg) translate(0, 0);
	}

	25% {
		transform: rotateZ(5deg) rotateY(360deg) translate(-5vw, 20vh);
	}

	50% {
		transform: rotateZ(15deg) rotateY(720deg) translate(5vw, 60vh);
	}

	75% {
		transform: rotateZ(5deg) rotateY(1080deg) translate(-10vw, 80vh);
	}

	100% {
		transform: rotateZ(15deg) rotateY(1440deg) translate(10vw, 110vh);
	}
}


#header [data-items="primary"] .ct-header-text p {
	position: relative;
}

#header [data-items="primary"] .ct-header-text p .birthdaycounter {
	position: absolute;
	width: 30px;
	top: 50px;
	left: 130px;
	color: var(--theme-palette-color-2);
	font-size: 25px;
	text-align: center;
	transition: transform 0.5s, color 0.5s;
}

.novae {
	color: #ff0000;
	transform: scale(1.5);
}

@media (min-width: 1000px) {
	#header [data-items="primary"] .ct-header-text p .birthdaycounter {
		width: 50px;
		top: 75px;
		left: 190px;
		font-size: 45px;
	}
}