A lot betternpm run dev!

src/app.css

@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap");
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -6,4 +8,5 @@ html,
 body {
     @apply bg-neutral-900;
     @apply text-white;
+    font-family: "Nunito", sans-serif;
 }

src/config.json

@@ -2,7 +2,7 @@
     "imageDuration": 10,
     "images": ["/img/1.jpg", "/img/2.jpg", "/img/3.jpg", "/img/4.jpg", "/img/5.jpg", "/img/6.jpg", "/img/7.jpg", "/img/8.jpg"],
 
-    "audioMethod": "radio",
+    "audioMethod": "playlist",
 
     "radio": "https://noise.madhouselabs.net",
     "radioServerName": "dope",
@@ -10,7 +10,6 @@
     "playlist": [
         { "title": "MF DOOM - Rapp Snitch Knishes", "location": "/audio/Rapp Snitch Knishes.mp3" },
         { "title": "Modjo - Lady (Hear Me Tonight)", "location": "/audio/Lady.mp3" },
-        { "title": "EVABOY - is there a point (girl u know)", "location": "/audio/is there a point (girl u know).mp3" },
+        { "title": "EVABOY - is there a point (girl u know)", "location": "/audio/is there a point (girl u know).mp3" }
-        { "title": "snuffles - SPOTS", "location": "/audio/SPOTS.mp3" }
     ]
 }

src/lib/Slideshow.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { slide } from "svelte/transition";
+    import { fade, slide } from "svelte/transition";
     import { images, imageDuration } from "../config.json";
 
     let index = Math.floor(Math.random() * images.length),
@@ -20,6 +20,6 @@
 
 {#each images as image}
     {#if selected === image}
-        <img in:slide={{ axis: "x" }} out:slide={{ axis: "x" }} class="max-h-screen" src={image} alt="" />
+        <img transition:fade class="absolute max-h-screen" src={image} alt="" />
     {/if}
 {/each}