diff --git a/css/src/_fonts.scss b/css/src/_fonts.scss
new file mode 100644
index 0000000..4ad29e5
--- /dev/null
+++ b/css/src/_fonts.scss
@@ -0,0 +1,11 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
+
+* {
+  font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: "Outfit", "Noto Color Emoji", sans-serif;
+
+  margin-bottom: 6px;
+}
\ No newline at end of file
diff --git a/css/src/_reset.scss b/css/src/_reset.scss
new file mode 100644
index 0000000..22c532d
--- /dev/null
+++ b/css/src/_reset.scss
@@ -0,0 +1,4 @@
+* {
+  padding: 0;
+  margin: 0;
+}
\ No newline at end of file
diff --git a/css/src/style.scss b/css/src/style.scss
new file mode 100644
index 0000000..c671ff6
--- /dev/null
+++ b/css/src/style.scss
@@ -0,0 +1,108 @@
+@import "reset";
+@import "fonts";
+
+body {
+  background: #f8fafc;
+}
+
+.container {
+  max-width: 1100px;
+
+  width: 100%;
+
+  margin: 0 auto;
+}
+
+ul, ol {
+  list-style-position: inside;
+}
+
+.pageHero {
+  background-image: url('../img/spawn.jpg');
+
+  background-position: center;
+
+  color: #fff;
+
+  height: 240px;
+
+  > .blurFiler {
+    backdrop-filter: blur(2px);
+
+    padding: 8px 0;
+
+    height: calc(100% - (8px + 8px));
+
+    > .container {
+      height: 100%;
+
+      display: flex;
+      flex-direction: row;
+
+      align-items: center;
+      justify-content: space-between;
+    }
+  }
+}
+
+.pageNav {
+  width: 100svw;
+
+  background: #f1f5f9;
+
+  > .container {
+    padding: 16px 0;
+
+    display: flex;
+    flex-direction: row;
+
+    align-items: center;
+    justify-content: space-between;
+
+    > ul {
+      list-style: none;
+
+      display: flex;
+
+      gap: 8px;
+
+      > li {
+        > a {
+          color: #0f172a;
+
+          text-decoration: none;
+
+          padding: 8px 16px;
+
+          border-radius: 32px;
+
+          &:hover, &.active {
+            background: rgba(15, 23, 42, 0.1);
+          }
+
+          &.buttonPrimary {
+            background: #6366f1;
+            color: #fff;
+          }
+        }
+      }
+    }
+  }
+}
+
+.pageContent {
+  margin: 16px 0;
+}
+
+.pageFooter {
+  display: flex;
+  flex-direction: row;
+
+  align-items: center;
+  justify-content: space-between;
+
+  > .left {
+    display: flex;
+    flex-direction: column;
+  }
+}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..2196791
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,94 @@
+@import url("https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap");
+* {
+  padding: 0;
+  margin: 0;
+}
+
+* {
+  font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: "Outfit", "Noto Color Emoji", sans-serif;
+  margin-bottom: 6px;
+}
+
+body {
+  background: #f8fafc;
+}
+
+.container {
+  max-width: 1100px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+ul, ol {
+  list-style-position: inside;
+}
+
+.pageHero {
+  background-image: url("../img/spawn.jpg");
+  background-position: center;
+  color: #fff;
+  height: 240px;
+}
+.pageHero > .blurFiler {
+  backdrop-filter: blur(2px);
+  padding: 8px 0;
+  height: calc(100% - 16px);
+}
+.pageHero > .blurFiler > .container {
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.pageNav {
+  width: 100svw;
+  background: #f1f5f9;
+}
+.pageNav > .container {
+  padding: 16px 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+.pageNav > .container > ul {
+  list-style: none;
+  display: flex;
+  gap: 8px;
+}
+.pageNav > .container > ul > li > a {
+  color: #0f172a;
+  text-decoration: none;
+  padding: 8px 16px;
+  border-radius: 32px;
+}
+.pageNav > .container > ul > li > a:hover, .pageNav > .container > ul > li > a.active {
+  background: rgba(15, 23, 42, 0.1);
+}
+.pageNav > .container > ul > li > a.buttonPrimary {
+  background: #6366f1;
+  color: #fff;
+}
+
+.pageContent {
+  margin: 16px 0;
+}
+
+.pageFooter {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+.pageFooter > .left {
+  display: flex;
+  flex-direction: column;
+}
+
+/*# sourceMappingURL=style.css.map */
diff --git a/css/style.css.map b/css/style.css.map
new file mode 100644
index 0000000..b541938
--- /dev/null
+++ b/css/style.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["src/_fonts.scss","src/_reset.scss","src/style.scss"],"names":[],"mappings":"AAAQ;ACAR;EACE;EACA;;;ADAF;EACE;;;AAGF;EACE;EAEA;;;AENF;EACE;;;AAGF;EACE;EAEA;EAEA;;;AAGF;EACE;;;AAGF;EACE;EAEA;EAEA;EAEA;;AAEA;EACE;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EAEA;EACA;;;AAKN;EACE;EAEA;;AAEA;EACE;EAEA;EACA;EAEA;EACA;;AAEA;EACE;EAEA;EAEA;;AAGE;EACE;EAEA;EAEA;EAEA;;AAEA;EACE;;AAGF;EACE;EACA;;;AAQZ;EACE;;;AAGF;EACE;EACA;EAEA;EACA;;AAEA;EACE;EACA","file":"style.css"}
\ No newline at end of file
diff --git a/css/style.min.css b/css/style.min.css
new file mode 100644
index 0000000..d24433a
--- /dev/null
+++ b/css/style.min.css
@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap";*{padding:0;margin:0}*{font-family:"Noto Sans","Noto Color Emoji",sans-serif}h1,h2,h3,h4,h5,h6{font-family:"Outfit","Noto Color Emoji",sans-serif;margin-bottom:6px}body{background:#f8fafc}.container{max-width:1100px;width:100%;margin:0 auto}ul,ol{list-style-position:inside}.pageHero{background-image:url("../img/spawn.jpg");background-position:center;color:#fff;height:240px}.pageHero>.blurFiler{backdrop-filter:blur(2px);padding:8px 0;height:calc(100% - 16px)}.pageHero>.blurFiler>.container{height:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between}.pageNav{width:100svw;background:#f1f5f9}.pageNav>.container{padding:16px 0;display:flex;flex-direction:row;align-items:center;justify-content:space-between}.pageNav>.container>ul{list-style:none;display:flex;gap:8px}.pageNav>.container>ul>li>a{color:#0f172a;text-decoration:none;padding:8px 16px;border-radius:32px}.pageNav>.container>ul>li>a:hover,.pageNav>.container>ul>li>a.active{background:rgba(15,23,42,.1)}.pageNav>.container>ul>li>a.buttonPrimary{background:#6366f1;color:#fff}.pageContent{margin:16px 0}.pageFooter{display:flex;flex-direction:row;align-items:center;justify-content:space-between}.pageFooter>.left{display:flex;flex-direction:column}/*# sourceMappingURL=style.min.css.map */
diff --git a/css/style.min.css.map b/css/style.min.css.map
new file mode 100644
index 0000000..e40d219
--- /dev/null
+++ b/css/style.min.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["src/_fonts.scss","src/_reset.scss","src/style.scss"],"names":[],"mappings":"AAAQ,gRCCN,UACA,WDCA,sDAGF,kBACE,mDAEA,kBENF,KACE,mBAGF,WACE,iBAEA,WAEA,cAGF,MACE,2BAGF,UACE,yCAEA,2BAEA,WAEA,aAEA,qBACE,0BAEA,cAEA,yBAEA,gCACE,YAEA,aACA,mBAEA,mBACA,8BAKN,SACE,aAEA,mBAEA,oBACE,eAEA,aACA,mBAEA,mBACA,8BAEA,uBACE,gBAEA,aAEA,QAGE,4BACE,cAEA,qBAEA,iBAEA,mBAEA,qEACE,6BAGF,0CACE,mBACA,WAQZ,aACE,cAGF,YACE,aACA,mBAEA,mBACA,8BAEA,kBACE,aACA","file":"style.min.css"}
\ No newline at end of file