Imported tailwind libraries, started to re-write main page

src/routes/+layout.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import Toasts from "$lib/components/Toasts/Toasts.svelte";
     import ThemeSwitcher from "$lib/components/ThemeSwitcher.svelte";
+    import "../app.css";
 </script>
 
 <nav>
@@ -10,51 +11,7 @@
     <ThemeSwitcher />
 </nav>
 
-<div class="main-container fade">
+<div class="container mx-auto">
     <Toasts />
     <slot />
 </div>
-
-<style>
-    .main-container {
-        margin-left: 10%;
-        margin-right: 10%;
-        padding-top: 2em;
-    }
-
-    @media (max-width: 800px) {
-        .main-container {
-            margin: 0em;
-            padding-top: 1em;
-        }
-    }
-
-    nav {
-        position: relative;
-        font-weight: bold;
-        font-size: 110%;
-        overflow: visible;
-        display: flex;
-        justify-content: center;
-        gap: 1.5em;
-        padding: 0em 0em 1.5em 0em;
-        z-index: 2;
-        height: 1.5em;
-        border-radius: 4px;
-    }
-
-    .fade {
-        -webkit-animation: fadeinout 1s linear forwards;
-        animation: fadeinout 1s linear forwards;
-    }
-
-    @-webkit-keyframes fadeinout {
-        0% { opacity: 0; }
-        100% { opacity: 1; }
-    }
-
-    @keyframes fadeinout {
-        0% { opacity: 0; }
-        100% { opacity: 1; }
-    }
-</style>