Add background image and styling improvements for artist cards

assets/css/main.css

@@ -1,5 +1,13 @@
 @import "tailwindcss";
 
+body {
+    font-family: 'Poppins';
+}
+
+.container {
+    @apply max-w-4/5 mx-auto;
+}
+
 .btn-primary {
     @apply bg-blue-600 text-white px-4 py-2 rounded;
 }

components/ArtistListItem.vue

@@ -4,11 +4,11 @@ const { runningOrder, country, artist, title, flag, artistID } = defineProps(['r
 
 <template>
     <NuxtLink :to="`/review/${artistID}`">
-    <div class="flex gap-4 border border-slate-200 justify-between overflow-clip items-center rounded-2xl">
-        <h2 class="w-1/4 text-center">{{ runningOrder }}</h2>
+    <div class="flex gap-4 border border-slate-200 justify-between overflow-clip items-center rounded-2xl ArtistCard">
+        <h2 class="w-1/4 text-center text-slate-300 text-6xl">{{ runningOrder }}</h2>
         <div class="flex flex-col w-1/2">
             <h2>{{ country }}</h2>
-            <p class="flex gap-2 text-sm">
+            <p class="flex md:gap-2 text-sm flex-col md:flex-row">
                 <span class="font-bold">{{ artist }}</span>
                 <span class="italic">{{ title }}</span>
             </p>
@@ -17,3 +17,10 @@ const { runningOrder, country, artist, title, flag, artistID } = defineProps(['r
     </div>
     </NuxtLink>
 </template>
+
+<style>
+    .ArtistCard {
+        background-color: rgba(255, 255, 255, 0.2);
+    }
+</style>
+    

layouts/default.vue

@@ -1,13 +1,23 @@
 <template>
     <title>Eurovision 2025</title>
     <Header />
-    <div class="container mx-auto pt-6 p-4 bg-slate-400">
+    <div class="container mx-auto pt-6 p-4">
         <slot />
     </div>
 </template>
 
 <style>
 body {
-    background-color: #aaa;
+    background-image: url('/bg.webp');
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: auto 100%;
 }
+
+.container {
+    -webkit-backdrop-filter: blur(20px);
+    backdrop-filter: blur(20px);
+    height: 100dvh;
+}
+
 </style>