add fade-in animations and conditional rendering to GuessesTable

src/routes/+layout.svelte

@@ -11,6 +11,7 @@
     defer
     src="https://umami.snail.city/script.js"
     data-website-id="5b8c31ad-71cd-4317-940b-6bccea732acc"
+    data-domains="bibdle.com,www.bibdle.com"
   ></script>
 </svelte:head>
 {@render children()}

src/routes/+page.svelte

@@ -338,17 +338,15 @@
 </script>
 
 <svelte:head>
-  <title>Bibdle – A daily bible game{isDev ? " (dev)" : ""}</title>
+  <title>Bibdle &mdash; A daily bible game{isDev ? " (dev)" : ""}</title>
   <meta
     name="description"
     content="Guess which book of the Bible a daily verse comes from. A Wordle-inspired Bible game!"
   />
 </svelte:head>
 
-<div class="min-h-dvh bg-linear-to-br from-blue-50 to-indigo-100 py-8">
-  <div
-    class="pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] w-full max-w-3xl mx-auto px-4"
-  >
+<div class="min-h-dvh md:bg-linear-to-br md:from-blue-50 md:to-indigo-200 py-8">
+  <div class="w-full max-w-3xl mx-auto px-4">
     <h1
       class="text-3xl md:text-4xl font-bold text-center uppercase text-gray-600 drop-shadow-2xl tracking-widest p-8 sm:p-12"
     >

src/routes/layout.css

@@ -4,4 +4,8 @@
 
 @theme {  
 	--font-triodion: "PT Serif", serif; 
+}
+
+html, body {
+	background: oklch(98.11% 0.02777 158.93);
 }