add register background clip path

src/routes/register/+layout.svelte

@@ -2,12 +2,22 @@
 	import { env } from '$env/dynamic/public';
 </script>
 
+<div class="fixed top-0 left-0 h-full w-full bg-[#050505]" />
 <img
-	class="fixed top-0 left-0 h-full w-full object-cover pointer-events-none blur-[2px]"
+	class="bg-snipped bg-black fixed top-0 left-0 h-full w-full object-cover pointer-events-none blur-[2px]"
 	src="{env.PUBLIC_BASE_PATH}/img/register-background.webp"
 	alt=""
 />
-<div class="fixed top-0 left-0 h-full w-full bg-[radial-gradient(rgba(0,0,0,0),rgba(0,0,0,.4))]" />
 <div class="flex justify-center w-full">
 	<slot />
 </div>
+
+<style>
+	.bg-snipped {
+		/* prettier-ignore */
+		clip-path: polygon(
+				0 20%, 100% -35%, 100% -5%, 0 50%,
+				0 110%, 100% 50%, 100% 80%, 0 140%
+		);
+	}
+</style>

src/routes/register/+page.svelte

@@ -12,7 +12,7 @@
 
 <!--the tooltip when not all fields are correctly filled won't completely show if the overflow is hidden-->
 <div
-	class="grid card w-11/12 xl:w-2/3 2xl:w-1/2 p-6 my-12 bg-base-100 shadow-lg"
+	class="grid card w-11/12 xl:w-2/3 2xl:w-1/2 p-6 my-12 bg-base-100 shadow-[0_0_10px_10px_rgba(0,0,0,0.7)]"
 	class:overflow-hidden={registered}
 >
 	{#if !registered}