move styles around and add logo theme

styles/global.css

@@ -3,6 +3,30 @@
 @tailwind utilities;
 
 :root {
+  /* LOGO Theme colors */
+  --rich-black: #071425ff;
+  --air-force-blue: #6f8fa5ff;
+  --light-blue: #a5c6cdff;
+  --white: #ffffffff;
+}
+
+@layer components {
+
+  .nav-bar {
+    @apply bg-blue-100 p-5;
+  }
+
+  .notes-container {
+    @apply flex;
+  }
+
+  .markdown-rendered {
+    @apply container mx-auto p-10;
+  }
+}
+
+@layer base {
+  :root {
     --background-body: #202b38;
     --background: #161f27;
     --background-alt: #1a242f;
@@ -24,25 +48,8 @@
     --variable: #d941e2;
     --highlight: #efdb43;
     --select-arrow: svg-load('./assets/select-arrow.svg', fill: #efefef);
-}
-
-@layer components {
-
-  .nav-bar {
-    @apply bg-blue-100 p-5;
   }
 
-  .notes-container {
-    @apply flex;
-  }
-
-  .markdown-rendered {
-    @apply container mx-auto p-10;
-  }
-}
-
-@layer base {
-
   /* base --------------------------------*/
   html {
     scrollbar-color: var(--scrollbar-thumb) var(--background-body);