New and improved in sveltekit

src/styles/media-queries.scss

@@ -0,0 +1,32 @@
+$tablet-width: 1200px;
+$mobile-width: 768px;
+
+@mixin tablet {
+  @media (min-width: #{$mobile-width}) {
+    @content;
+  }
+}
+
+@mixin mobile {
+  @media (max-width: #{$mobile-width}) {
+    @content;
+  }
+}
+
+@mixin desktop {
+  @media (min-width: #{$tablet-width + 1px}) {
+    @content;
+  }
+}
+
+.desktop-only {
+  @include mobile {
+    display: none !important;
+  }
+}
+
+.mobile-only {
+  @include tablet {
+    display: none !important;
+  }
+}

src/styles/variables.css

@@ -0,0 +1,35 @@
+:root {
+  --background: white;
+  --backdrop: #f5f5f7;
+  --text-color: black;
+  --red: #ff97a3;
+  --blue: #9ad9ff;
+  --header-height: 200px;
+
+  --color-transition-duration: 0.4s;
+}
+
+.dark {
+  --background: pink;
+  --backdrop: #202124;
+  --text-color: white;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+a {
+  color: inherit; /* blue colors for links too */
+  text-decoration: inherit; /* no underline */
+}
+
+ul,
+li {
+  margin: 0;
+  padding: 0;
+}
+
+li {
+  list-style-type: none;
+}