Style changes to font and colours

src/pages/index.astro

@@ -7,10 +7,14 @@ const recipies = await client.collection("recipes").getFullList()
 ---
 
 <PageLayout>
-	<p class="w-full bg-yellow-100 p-5 text-3xl font-medium">Recipie</p>
+	<div class="flex w-full bg-yellow-100 p-5">
+		<p class=" text-3xl">Reci</p>
+		<p class=" text-3xl text-amber-500">pie</p>
+		🥧
+	</div>
 	
 	<div id="content" class="p-5 pt-2">
-		<p class="pb-2">What would you like today?</p>
+		<!-- <p class="pb-2">What would you like today?</p> -->
 
 		<div class="grid gap-2 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
 			{

src/styles/global.css

@@ -1,5 +1,7 @@
 @import "tailwindcss";
 
 html {
-    @apply bg-yellow-50;
+    /* @apply bg-[#1d1f21]; */
+    @apply bg-[#fafafa];
+    @apply font-stretch-condensed;
 }