src/Toasts/Toasts.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import Toast from "./Toast.svelte";
 
-  import { dismissToast, toasts } from "./store";
+  import { dismissToast, toasts } from "$lib/store";
 </script>
 
 {#if $toasts}
@@ -15,7 +15,7 @@
 <style lang="postcss">
   section {
     position: fixed;
-    top: 0;
+    bottom: 0;
     left: 0;
     right: 0;
     width: 100%;
@@ -23,6 +23,6 @@
     margin-top: 1rem;
     justify-content: center;
     flex-direction: column;
-    z-index: 1000;
+    z-index: 10;
   }
 </style>

src/main.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { getJson } from "$lib/data";
 	import { Toast, ToastType } from "$lib/toast";
-    import { addToast } from "./store";
+    import { addToast } from "$lib/store";
 </script>
 
 <style>
@@ -30,7 +30,6 @@
         font-size: 125%;
     }
     
-
     @media (max-width: 800px) {
         .flex-container {
             align-items: center;
@@ -73,12 +72,11 @@
             <p class="about">{@html info.about}</p>
         </div>
     </div>
-    
 {:catch}
     <div class="card">
         <div class="card-header">
             <h1>Unable to load portfolio overview data</h1>
         </div>
     </div>
-    {addToast(new Toast("Unable to load me.json", ToastType.Error, true, 3000))}
+    <div style="display: none;">{addToast(new Toast("Unable to load me.json", ToastType.Error, true, 3000))}</div>
 {/await}

src/routes/+layout.svelte

@@ -1,9 +1,8 @@
 <script>
-	import Toasts from "../Toasts.svelte";
+	import Toasts from "../Toasts/Toasts.svelte";
 </script>
 
 <style>
-
     .main-container {
         margin-left: 10%;
         margin-right: 10%;