svelte is weird

src/lib/components/header.svelte

@@ -0,0 +1,3 @@
+<div class="flex w-full h-14 px-2 text-2xl rounded-xl mb-4 bg-[#009FB7] place-items-center">
+    <p>Memento</p>
+</div>

src/routes/+layout.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
 	import './layout.css';
 	import favicon from '$lib/assets/favicon.svg';
+	import Header from '$lib/components/header.svelte';
 
 	let { children } = $props();
 </script>
 
 <svelte:head><link rel="icon" href={favicon} /></svelte:head>
+
+<Header />
+
 {@render children()}

src/routes/+page.svelte

@@ -1,2 +0,0 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>

src/routes/layout.css

@@ -1,2 +1,20 @@
 @import 'tailwindcss';
 @plugin '@tailwindcss/forms';
+
+/*@import 'quill/dist/quill.core.css';
+@import 'quill/dist/quill.bubble.css';
+@import 'quill/dist/quill.snow.css';*/
+
+html {
+    @apply py-3 px-4;
+    @apply bg-[#252525] text-white
+}
+
+  html body {
+    @apply font-[AmericanTypewriter];
+    /* @apply w-full md:w-[68%] mx-auto h-full; */
+  }
+
+button {
+    @apply py-2 px-3 bg-green-400 rounded-xl;
+}