Series page finalized

src/lib/components/Modal/Modal.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { fade } from 'svelte/transition';
 	import { modalStack } from './Modal';
 
 	// export let visible = false;

src/lib/components/Modal/ModalBackground.svelte

@@ -6,6 +6,6 @@
 {#if $modalStack.top}
 	<div
 		class="fixed inset-0 bg-stone-900 bg-opacity-50 z-[19] overflow-hidden"
-		transition:fade={{ duration: 100 }}
+		transition:fade|global={{ duration: 100 }}
 	/>
 {/if}

src/lib/components/Modal/ModalContainer.svelte

@@ -4,7 +4,8 @@
 
 <div
 	class="max-w-3xl self-start mt-[10vh] bg-[#33333388] backdrop-blur-xl rounded overflow-hidden flex flex-col flex-1 mx-4 sm:mx-16 lg:mx-24 drop-shadow-xl"
-	in:fly|global={{ y: 20, duration: 200 }}
+	in:fly|global={{ y: 20, duration: 200, delay: 200 }}
+	out:fly|global={{ y: 20, duration: 200 }}
 >
 	<slot />
 </div>

src/lib/components/Modal/ModalHeader.svelte

@@ -24,7 +24,7 @@
 				{#if !!back}
 					<ChevronLeft size={20} />
 				{/if}
-				<h1>{text}</h1>
+				<h1 class="font-medium">{text}</h1>
 			</button>
 		{/if}
 	</slot>