move styles around and add logo theme

styles/global.css

@@ -2,6 +2,30 @@
 @tailwind components;
 @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;
@@ -26,23 +50,6 @@
     --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);