Add Tailwind CSS and update layout and page styles

src/routes/+layout.svelte

@@ -1,6 +1,7 @@
 <script>
     import Footer from "$lib/components/Footer.svelte";
     import Navbar from "$lib/components/Navbar.svelte";
+    import "../app.css";
 </script>
 
 <Navbar />

src/routes/+page.svelte

@@ -5,37 +5,8 @@
     }
 </script>
 
-<h1>Welcome to AdventureLog 🗺️</h1>
-<img src={campingDrawing} width="25%" alt="Logo" />
-<button on:click={navToLog}>Open Log</button>
-
-<style>
-    button {
-        margin-left: 1rem;
-        padding: 0.5rem 1rem;
-        border: none;
-        border-radius: 4px;
-        background-color: #076836;
-        color: white;
-        cursor: pointer;
-        transition: background-color 0.3s ease;
-        box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
-        margin-left: auto;
-        margin-right: auto;
-        display: block;
-    }
-
-    button:hover {
-        background-color: #074b28;
-    }
-    h1 {
-        text-align: center;
-    }
-    img {
-        display: block;
-        margin-left: auto;
-        margin-right: auto;
-        margin-top: 2rem;
-        margin-bottom: 2rem;
-    }
-</style>
+<div class="flex flex-col items-center justify-center">
+    <article class="prose"><h1 class="mb-4">Welcome. Let's get Exploring!</h1></article>
+    <img src={campingDrawing} class="w-1/4 mb-4" alt="Logo" />
+    <button on:click={navToLog} class="btn btn-primary">Open Log</button>
+</div>

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> -->