split up css style files

styles/base/base.css

@@ -0,0 +1,34 @@
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    background: linear-gradient(135deg, var(--bg), var(--bg2));
+    margin: 0;
+}
+
+p,
+span,
+li,
+a {
+    color: var(--muted);
+    line-height: 1.7;
+    font-size: var(--font-size);
+    font-family: var(--sans);
+}
+
+h1,
+h2,
+h3 {
+    color: var(--text);
+    font-family: var(--serif);
+}
+
+a {
+
+    text-decoration: none;
+}
+
+* {
+    box-sizing: border-box;
+}

styles/base/utilities.css

@@ -0,0 +1,3 @@
+.hidden {
+    display: none;
+}

styles/base/variables.css

@@ -0,0 +1,22 @@
+:root {
+    --bg: #5E4C93;
+    --bg2: #1b162a;
+    --text: #FFFFFF;
+    --surface: #3e3261;
+    --muted: #C5C1D1;
+    --border: #20192a;
+    --serif: Georgia, serif;
+    --sans: system-ui, sans-serif;
+    --nav-w: 240px;
+    --nav-mobile-w: min(60vw, 400px);
+    --font-size: 1rem;
+}
+
+.dark {
+    --bg: #130e21;
+    --bg2: #090710;
+    --text: #FFFFFF;
+    --surface: #3e3261;
+    --muted: #C5C1D1;
+    --border: #726684;
+}