2 files changed, 47 insertions, 0 deletions
diff --git a/src/styles/global.css b/src/styles/global.css
new file mode 100644
index 0000000..aab0c0d
--- /dev/null
+++ b/src/styles/global.css
@@ -0,0 +1,32 @@
+
+/*
+  This file is used for all of your global styles and CSS variables.
+  Check here https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties for more info on using CSS variables.
+*/
+:root {
+  --font-family: sans-serif;
+}
+
+html, body {
+  font-family: var(--font-family);
+  padding: 0;
+  margin: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+
+  html,
+  body {
+    background-color: #181818;
+    color: white;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+
+  html,
+  body {
+    background-color: white;
+    color: black;
+  }
+}
diff --git a/src/styles/shared-styles.ts b/src/styles/shared-styles.ts
new file mode 100644
index 0000000..c4fb4a0
--- /dev/null
+++ b/src/styles/shared-styles.ts
@@ -0,0 +1,15 @@
+import { css } from 'lit';
+
+// these styles can be imported from any component
+// for an example of how to use this, check /pages/about-about.ts
+export const styles = css`
+  @media(min-width: 1000px) {
+    sl-card {
+      max-width: 70vw;
+    }
+  }
+
+  main {
+    margin-top: 80px;
+  }
+`;
+\ No newline at end of file