feat: style some shit better

src/routes/+page.svelte

@@ -55,11 +55,13 @@
 {#if contentVisible}
 	<div class="einladung" out:fade>
 		<TextSplit
+			center
 			content="Wir laden dich herzlich ein, an unserer exklusiven Silvesterparty teilzunehmen, die dieses Jahr im magischen Ambiente eines Maskenballs stattfindet. Tauche ein in eine Nacht voller Geheimnisse, Eleganz und festlichem Glanz."
 		/>
 
 		<span in:fade={{ delay: 8000, duration: 1000 }}>
 			<Button
+				--font-size="0.8em"
 				on:click={() => {
 					contentVisible = false;
 					questionVisible = true;

src/routes/gallery/+page.svelte

@@ -13,9 +13,9 @@
 				...item,
 				y: -5 + Math.random() * 10,
 				x: -5 + Math.random() * 10,
-				scale: 0.9 + Math.random() * 0.2,
-				rot: -5 + Math.random() * 10,
-				marginTop: -10 + Math.random() * 20
+				scale: 0.9 + Math.random() * 0.15,
+				rot: `${-0.5 + Math.random() * 1}deg`,
+				marginTop: 50 + Math.random() * 30
 			};
 		})
 		.reverse();
@@ -29,7 +29,7 @@
 	<div class="grid">
 		{#each items as item}
 			<div
-				style="--x: {item.x}%, --y: {item.y}%; --scale: {item.scale}; --rot:{item.rot}; margin-top: {item.marginTop}px"
+				style="--x: {item.x}%; --y: {item.y}%; --scale: {item.scale}; --rot:{item.rot}; margin-top: {item.marginTop}px"
 				class="item"
 				class:active={item.noble_name === last_name}
 			>
@@ -49,25 +49,42 @@
 		padding-bottom: 100px;
 	}
 	h1 {
-		font-size: 4rem;
+		font-size: 5rem;
 		font-family: Parisienne, cursive;
 		color: white;
 		margin-left: 50px;
+		text-align: center;
 	}
 	p {
 		color: white;
 		font-family: Parisienne, cursive;
-		font-size: 1.2em;
+		font-size: 1.5em;
 		margin-left: 40px;
 		width: 80%;
 		margin-top: 10px;
 	}
+
 	.item {
-		transform: translate(var(--x), var(--y)) scale(var(--scale)) rotate(var(--rot) deg);
+		transform: scale(var(--scale)) rotate(var(--rot)) translate(var(--x), var(--y));
 	}
+
 	.active {
-		filter: drop-shadow(0px 0px 40px #be8630aa) drop-shadow(0px 0px 5px black)
-			drop-shadow(0px 0px 5px black) drop-shadow(0px 0px 5px black);
+		filter: drop-shadow(0px 0px 40px #be8630aa);
+		animation: glow 5s infinite alternate;
+	}
+
+	@keyframes glow {
+		from {
+			filter: drop-shadow(0px 0px 10px #be8630ff);
+		}
+		to {
+			filter: drop-shadow(0px 0px 40px #be86305c);
+		}
+	}
+
+	:global(html) {
+		background-image: url(/pattern.jpg) !important;
+		backdrop-filter: brightness(0.5) !important;
 	}
 	div {
 		max-width: 1300px;

src/routes/global.css

@@ -18,5 +18,5 @@ html, body {
 	html {
 		background: black;
 		background-image: url(/pattern_b.jpg);
-  backdrop-filter: brightness(0.3);
+    backdrop-filter: brightness(0.3);
 	}