moved water background to separate component

src/lib/viewport/water-background.svelte

@@ -0,0 +1,19 @@
+<div class="waters"></div>
+
+<style>
+    .waters {
+        --color-waters: #242424;
+
+        position: fixed;
+        z-index: -99;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        background-color: var(--color-waters);
+        mask-image: url('/bremen-waters-white.svg');
+        mask-position: center;
+        background-position: center;
+        background-attachment: fixed;
+    }
+</style>

src/routes/+layout.svelte

@@ -1,6 +1,7 @@
 <script>
     import Header from "$lib/viewport/header.svelte";
     import Footer from "$lib/viewport/footer.svelte";
+    import WaterBackground from "$lib/viewport/water-background.svelte";
 
 	let { children } = $props();
 </script>
@@ -9,7 +10,7 @@
     <meta name="robots" content="noai, noimageai">
 </svelte:head>
 
-<div class="waters"></div>
+<WaterBackground />
 <div class="all-content-container">
     <Header />
 
@@ -113,8 +114,6 @@
             --color-background-highlight-hover: color-mix(in srgb, var(--color-highlight) 60%, transparent);
             --color-background-highlight-hover-alt: color-mix(in srgb, var(--color-highlight-alt) 66%, transparent);
             --color-background-highlight-hover-dark: color-mix(in srgb, var(--color-highlight-dark) 60%, transparent);
-            
-            --color-waters: #242424;
 
             --color-link-unvisited: #c2e8ff;
             --color-link-visited: #ffd7f0;
@@ -197,20 +196,6 @@
             /* max-width: 100%; */
         }
 
-        .waters {
-            position: fixed;
-            z-index: -99;
-            top: 0;
-            left: 0;
-            height: 100%;
-            width: 100%;
-            background-color: var(--color-waters);
-            mask-image: url('/bremen-waters-white.svg');
-            mask-position: center;
-            background-position: center;
-            background-attachment: fixed;
-        }
-
         p, span, li, pre, a {
             color: var(--color-text);
             font-size: var(--font-size-sans-serif);

src/routes/test/+page.svelte

@@ -0,0 +1 @@
+asdf