From bd7ab0571336dcb3852867e6891a26f21cb4e0c1 Mon Sep 17 00:00:00 2001
From: MoonbamiOfficial <141120384+MoonbamiOfficial@users.noreply.github.com>
Date: Tue, 28 May 2024 23:20:43 +0800
Subject: [PATCH] feat: add default global styling

---
 src/styles/globals.scss           | 20 ++++++++++++++
 src/styles/media-query.scss       | 43 +++++++++++++++++++++++++++++++
 src/styles/variables/_colors.scss |  5 ++++
 3 files changed, 68 insertions(+)
 create mode 100644 src/styles/globals.scss
 create mode 100644 src/styles/media-query.scss
 create mode 100644 src/styles/variables/_colors.scss

diff --git a/src/styles/globals.scss b/src/styles/globals.scss
new file mode 100644
index 0000000..7efc9e8
--- /dev/null
+++ b/src/styles/globals.scss
@@ -0,0 +1,20 @@
+@import "./variables/colors";
+@import "media-query";
+
+*,
+::before,
+::after {
+  margin: 0;
+  padding: 0;
+  text-decoration: none;
+  box-sizing: border-box;
+  font-family: "Poppins", sans-serif;
+  transition: all 150ms ease-in-out;
+}
+
+body {
+  background-color: $background;
+}
+main {
+  padding: 100px 0;
+}
\ No newline at end of file
diff --git a/src/styles/media-query.scss b/src/styles/media-query.scss
new file mode 100644
index 0000000..a4af7da
--- /dev/null
+++ b/src/styles/media-query.scss
@@ -0,0 +1,43 @@
+.container {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 2vw;
+  padding-right: 2vw;
+}
+
+@media (min-width: 475px) {
+  .container {
+    max-width: 475px;
+  }
+}
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+@media (min-width: 1920px) {
+  .container {
+    max-width: 1920px;
+  }
+}
diff --git a/src/styles/variables/_colors.scss b/src/styles/variables/_colors.scss
new file mode 100644
index 0000000..352c978
--- /dev/null
+++ b/src/styles/variables/_colors.scss
@@ -0,0 +1,5 @@
+$primary: #3f72af;
+$primary-variant: #37619d;
+$secondary: #112d4e;
+$surface: #dbe2ef;
+$background: #f9f7f7;