Add Tailwind CSS and update layout and page styles

src/routes/log/+page.svelte

@@ -5,6 +5,7 @@
     import { onMount } from 'svelte';
     import { exportData } from "../../services/export";
     import { importData } from "../../services/import";
+    import exportFile from "$lib/assets/exportFile.svg";
 
     import mapDrawing from "$lib/assets/adventure_map.svg"
 
@@ -62,9 +63,13 @@
     
 </script>
 
-<input bind:value={newName} placeholder="Adventure Name" />
-<input bind:value={newLocation} placeholder="Adventure Location" />
-<button on:click={createNewAdventure}>Add Adventure</button>
+<div class="flex flex-row items-center justify-center gap-4">
+    <input type="text" bind:value={newName} placeholder="Adventure Name" class="input input-bordered w-full max-w-xs" />
+    <input type="text" bind:value={newLocation} placeholder="Adventure Location" class="input input-bordered w-full max-w-xs" />
+    <button class="btn" on:click={createNewAdventure}>Add Adventure</button>
+</div>
+
+
 
 {#each adventures as adventure, i}
     <div>
@@ -73,8 +78,8 @@
 {/each}
 
 {#if adventures.length == 0}
-<div class="addsomething">
-    <h2>Add some adventures!</h2>
+<div class="flex flex-col items-center justify-center mt-28">
+    <article class="prose mb-4"><h2>Add some adventures!</h2></article>
     <img src={mapDrawing} width="25%" alt="Logo" />
 </div >
 
@@ -90,10 +95,16 @@
 {/if}
 
 {#if adventures.length != 0}
-<button on:click={async () => { window.location.href = exportData(); }}>Save as File</button>
+
+
+
+<button class="btn btn-neutral ml-auto mr-auto block" on:click={async () => { window.location.href = exportData(); }}>
+    <img src={exportFile} class="inline-block -mt-1" alt="Logo" /> Save as File
+</button>
+
 {/if}
 
-<style>
+<!-- <style>
 .addsomething {
     display: flex;
     flex-direction: column;
@@ -117,4 +128,4 @@ button {
     button:hover {
         background-color: #074b28;
     }
-</style>
+</style> -->