Moved styles to svelte files

Author: Wolfyxon

src/lib/styles/anim.svelte

@@ -0,0 +1,46 @@
+<style>
+    :global {
+        @keyframes flash {
+            0% {
+                opacity: 1;
+            }
+            50% {
+                opacity: 0.5;
+            }
+            100% {
+                opacity: 1;
+            }
+        }
+
+        @keyframes fade-in {
+            0% {
+                opacity: 0;
+            }
+            100% {
+                opacity: 1;
+            }
+        }
+
+        @keyframes slide-in-left {
+            0% {
+                opacity: 0;
+                transform: translateX(-35%);
+            }
+            100% {
+                opacity: 1;
+                transform:  translateX(0%);
+            }
+        }
+
+        @keyframes slide-in-bottom {
+            0% {
+                opacity: 0;
+                transform: translateY(100%);
+            }
+            100% {
+                opacity: 1;
+                transform:  translateY(0%);
+            }
+        }
+    }
+</style>

src/lib/styles/global.svelte

@@ -0,0 +1,70 @@
+<style>
+    :global {
+        :root {
+        --colorA: rgb(177, 60, 255);
+        --colorB: rgb(98, 231, 81);
+        --colorC: rgb(83, 153, 233);
+
+        --panel: rgba(31, 31, 31, 0.6);
+        --panel-outline: rgb(51, 51, 51);
+        --panel-dark: rgb(14, 14, 14);
+        }
+
+        body, html {
+            margin: 0;
+            padding: 0;
+            height: 100%;
+        }
+
+        body {
+            font-family: Verdana, sans-serif;
+            background-color: black;
+            color: white;
+        }
+
+        main {
+            max-width: 1200px;
+            padding: 25px;
+            margin: 0 auto;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            height: 92%;
+        }
+
+        button {
+            background: var(--panel);
+            min-width: 100px;
+            color: white;
+            border: var(--panel-outline) 2px solid;
+            border-radius: 5px;
+            padding: 5px 15px;
+            cursor: pointer;
+            transition: 0.2s;
+        }
+
+        button:hover {
+            background: white;
+            color: black;
+        }
+
+        a {
+            color: white;
+            transition: 0.2s;
+        }
+
+        a:hover {
+            opacity: 0.8;
+        }
+
+        #site-content {
+            animation: fade-in 2s;
+            flex: 1;
+        }
+
+        .panel {
+            background-color: var(--panel);
+            border-radius: 10px;
+        }
+    }
+</style>

src/routes/+layout.svelte

@@ -1,18 +1,21 @@
 <script lang="ts">
 	import favicon from '$lib/assets/favicon.svg';
     import Background from '$lib/comp/Background.svelte';
-    import Footer from '$lib/comp/Footer.svelte';
+	
+	import GlobalStyle from "$lib/styles/global.svelte";
+	import AnimStyle from "$lib/styles/anim.svelte";
 
 	let { children } = $props();
 </script>
 
 <svelte:head>
 	<title>SongWrap</title>
 	<meta name="description" content="Import and view your listening stats in a fancy way." />
-
 	<link rel="icon" href={favicon} />
-	<link rel="stylesheet" href="/styles/global.css" />
-	<link rel="stylesheet" href="/styles/anim.css" />
+
+	<GlobalStyle/>
+	<AnimStyle />
+	
 </svelte:head>
 
 <Background />