Fix CSS order

src/main.css

@@ -1,45 +1,47 @@
-body {
-  font-size: 20px;
-}
-
-::selection {
-  @apply bg-blue-900 bg-opacity-80 text-white;
-}
-
-.prose {
-  :where(h1) {
-    @apply font-bold text-3xl sm:text-5xl text-gray-900;
+@layer components {
+  body {
+    font-size: 20px;
   }
 
-  :where(h2) {
-    @apply font-bold text-2xl sm:text-4xl text-gray-600 mt-8;
+  ::selection {
+    @apply bg-blue-900 bg-opacity-80 text-white;
   }
 
-  :where(ol) {
-    @apply list-decimal list-inside space-y-2;
+  .prose {
+    h1 {
+      @apply font-bold text-3xl sm:text-5xl text-gray-900;
+    }
 
-    ::marker {
-      @apply text-gray-600;
+    h2 {
+      @apply font-bold text-2xl sm:text-4xl text-gray-600 mt-8;
+    }
+
+    ol {
+      @apply list-decimal list-inside space-y-2;
+
+      ::marker {
+        @apply text-gray-600;
+      }
+    }
+
+    ul {
+      @apply list-disc list-inside space-y-1;
+    }
+
+    address, p, ol, ul {
+      @apply not-italic text-lg max-w-240 mt-5;
     }
   }
 
-  :where(ul) {
-    @apply list-disc list-inside space-y-1;
-  }
+  .asterisk-list > li {
+    &:not(:last-child) {
+      margin-bottom: 5px;
+    }
 
-  :where(address, p, ol, ul) {
-    @apply not-italic text-lg max-w-240 mt-5;
-  }
-}
-
-.asterisk-list > li {
-  &:not(:last-child) {
-    margin-bottom: 5px;
-  }
-
-  &::before {
-    @apply text-blue-900;
-    content: "*";
-    margin-right: 5px;
+    &::before {
+      @apply text-blue-900;
+      content: "*";
+      margin-right: 5px;
+    }
   }
 }

src/main.js

@@ -1,5 +1,5 @@
-import "./main.css"
 import "virtual:windi.css"
+import "./main.css"
 import routes from "virtual:generated-pages"
 import { createApp } from "vue"
 import { createRouter, createWebHistory } from "vue-router"

src/pages/impressum.vue

@@ -19,7 +19,7 @@
         hey@deltaa.xyz
       </a>
     </p>
-    <p class="text-sm">
+    <p class="!text-sm">
       {{ t("phone") }}: +49 176 46146329<br>
       {{ t("phone-warning-1") }}<br>
       {{ t("phone-warning-2") }}<br>