Copied the global styling to globals.scss

Author: Satoshi-Sh

styles/globals.scss

@@ -1,3 +1,6 @@
+@use './variables' as *;
+@use './mixins' as *;
+
 :root {
   --bg-contact-card: #ffffff;
   --bg-color: #eaeaea;
@@ -17,7 +20,86 @@
   --shadow-bottom: 0 10px 20px -5px rgba(0, 0, 0, 0.15);
 }
 
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  font-family: $font-family-primary;
+  color: var(--color-primary-content);
+  padding: 0;
+  margin: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: $font-family-primary;
+}
+
+h1 {
+  font-size: 3rem;
+  line-height: 3.5rem;
+
+  @include desktop {
+    font-size: 4.5rem;
+    line-height: 5rem;
+  }
+}
+
 h2 {
+  font-size: 3rem;
+  line-height: 3.5rem;
   overflow-wrap: break-word;
   hyphens: auto;
+
+  @include desktop {
+    font-size: 3.5rem;
+    line-height: 5rem;
+  }
+}
+
+h3 {
+  font-size: 1.5rem;
+  line-height: 1.938rem;
+}
+
+p,
+li {
+  font-size: 1.25rem;
+  line-height: 1.938rem;
+
+  @include desktop {
+    font-size: 1.5rem;
+  }
+}
+
+ul {
+  list-style: none;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+  @include transition(all 0.3s ease);
+
+  &:hover {
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+}
+
+.not-found,
+.contact-us,
+.post {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  justify-items: center;
+  margin: 10% auto;
+  align-items: center;
 }