Removed scss styling in favor of Tailwind, more base styling added

Background images added and styled.
Also added a font family to the index.html: anaheim from bunnyfonts.

fe/src/App.vue

@@ -1,13 +1,54 @@
 <template>
-  <div>
-    <RouterView />
+  <div class="app-background">
+    <img class="bg2" src="./assets/bg_2.jpg" aria-hidden="true" />
+    <img class="bg1" src="./assets/bg_1.jpg" aria-hidden="true" />
   </div>
+  <MainMenu />
+  <RouterView />
 </template>
 
 <script setup>
+import MainMenu from '@/components/base/MainMenu.vue'
 import { RouterView } from 'vue-router'
 
 console.log('app.vue loaded')
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped>
+@reference "@/assets/main.css";
+
+.app-background {
+  @apply fixed
+  inset-0
+  size-full
+  overflow-hidden
+  pointer-events-none
+  opacity-40
+  z-[-1];
+
+  img {
+    @apply absolute
+    size-full
+    object-cover;
+  }
+
+  .bg1 {
+    @apply mix-blend-multiply;
+  }
+
+  .bg2 {
+    @apply grayscale;
+  }
+
+  &::after {
+    @apply content-['']
+    absolute
+    inset-0
+    bg-radial
+    from-sky-400/40
+    to-black/80
+    mix-blend-multiply
+    pointer-events-none;
+  }
+}
+</style>

fe/src/assets/main.css

@@ -0,0 +1,56 @@
+@import 'tailwindcss';
+
+@variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --font-sans: 'Anaheim', sans-serif;
+}
+
+body {
+  @apply font-sans 
+  bg-slate-900
+  text-slate-50;
+}
+
+h1,
+h2 {
+  @apply font-bold;
+}
+
+h3,
+h4,
+h5,
+h6 {
+  @apply font-semibold;
+}
+
+h1 {
+  @apply text-4xl;
+}
+
+h2 {
+  @apply text-3xl;
+}
+
+h3 {
+  @apply text-2xl;
+}
+
+h4 {
+  @apply text-xl;
+}
+
+h5 {
+  @apply text-lg;
+}
+
+.panel {
+  @apply fixed
+  inset-16
+  p-4
+  bg-white/10
+  backdrop-blur-sm
+  rounded-xl
+  border
+  border-white/15;
+}

fe/src/main.js

@@ -1,3 +1,4 @@
+// import './assets/jemx.scss'
 import './assets/main.css'
 
 import { createApp } from 'vue'