diff --git a/css/src/_reset.scss b/css/src/_reset.scss
deleted file mode 100644
index cdf9012..0000000
--- a/css/src/_reset.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-* {
-  margin: 0;
-}
diff --git a/css/src/style.scss b/css/src/style.scss
index 27d773b..1dd394d 100644
--- a/css/src/style.scss
+++ b/css/src/style.scss
@@ -1,4 +1,3 @@
-//@import "reset";
 @import "fonts";
 
 body {
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..78db5c1
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,256 @@
+@import url("https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Outfit:wght@500&display=swap");
+body, input {
+  font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: "Outfit", "Noto Color Emoji", sans-serif;
+  font-weight: 500;
+}
+
+.pageHero {
+  font-family: "Comic Neue", "Comic Sans MS", "Noto Color Emoji", sans-serif;
+}
+
+body {
+  background: white;
+  margin: 0;
+}
+@media (prefers-color-scheme: dark) {
+  body {
+    background: #202120;
+    color: white;
+  }
+}
+
+.container {
+  max-width: 960px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 24px;
+  box-sizing: border-box;
+}
+
+ul, ol {
+  list-style-position: inside;
+}
+
+p {
+  line-height: 1.6;
+  opacity: 0.92;
+}
+
+img {
+  max-width: 100%;
+}
+
+a {
+  color: #527D52;
+}
+@media (prefers-color-scheme: dark) {
+  a {
+    color: #D0DFD0;
+  }
+}
+a:visited {
+  opacity: 0.9;
+}
+
+.pageHero {
+  background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url("/img/Panorama-Lens-Blur.png");
+  background-position: center;
+  background-size: cover;
+  height: 220px;
+}
+@media (prefers-color-scheme: dark) {
+  .pageHero {
+    background-image: linear-gradient(rgba(16, 22, 16, 0.9), rgba(16, 22, 16, 0.9)), url("/img/Panorama-Lens-Blur.png");
+  }
+}
+.pageHero > .container {
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+@media (max-width: 600px) {
+  .pageHero > .container {
+    justify-content: center;
+  }
+}
+.pageHero > .container > div {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.pageHero > .container > div.Branding {
+  align-items: flex-start;
+}
+@media (max-width: 600px) {
+  .pageHero > .container > div.Branding {
+    align-items: center;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  .pageHero > .container > div.Branding img {
+    filter: invert(1);
+  }
+}
+.pageHero > .container > div.Branding span {
+  font-size: 24px;
+  opacity: 0.75;
+}
+.pageHero > .container > div.Server-Information {
+  align-items: center;
+  gap: 4px;
+}
+@media (max-width: 600px) {
+  .pageHero > .container > div.Server-Information {
+    display: none;
+  }
+}
+.pageHero > .container > div.Server-Information input {
+  text-align: center;
+  font-size: 24px;
+}
+.pageHero > .container > div.Server-Information input:not(:hover, :focus) {
+  color: inherit;
+  border-color: transparent;
+  background: transparent;
+}
+
+.Nav-Toggle {
+  z-index: 10;
+  position: fixed;
+  top: 8px;
+  right: 8px;
+  font-size: 18px;
+  background: #527D52;
+  color: #fff;
+  padding: 8px 24px;
+  border-radius: 32px;
+  font-weight: bold;
+  user-select: none;
+  cursor: pointer;
+}
+@media (min-width: 601px) {
+  .Nav-Toggle {
+    display: none;
+  }
+}
+
+.pageNav {
+  width: 100%;
+  border: solid #D0DFD0;
+  border-width: 0 0 1px 0;
+  background: #F9FFF9;
+}
+@media (prefers-color-scheme: dark) {
+  .pageNav {
+    border-color: #575F57;
+    background: #272F27;
+  }
+}
+.pageNav > .container {
+  padding: 16px 24px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+}
+@media (max-width: 600px) {
+  .pageNav > .container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 9;
+    background: inherit;
+    transition: 0.12s;
+  }
+  .pageNav > .container:not(.openned) {
+    opacity: 0;
+    pointer-events: none;
+    transform: scale(1.2);
+    transition: 0.24s;
+  }
+}
+.pageNav > .container > div {
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+@media (max-width: 600px) {
+  .pageNav > .container > div {
+    width: 100%;
+    flex-direction: column;
+    gap: 6px;
+    align-items: center;
+  }
+}
+.pageNav > .container > div > a {
+  user-select: none;
+  font-size: 18px;
+  box-sizing: border-box;
+  color: #7E9E7E;
+  text-decoration: none;
+  padding: 8px 24px;
+  border-radius: 32px;
+  outline: solid transparent 2px;
+  transition: 0.24s;
+}
+@media (max-width: 600px) {
+  .pageNav > .container > div > a {
+    font-size: 24px;
+    width: 100%;
+    padding: 12px 24px;
+    text-align: center;
+  }
+}
+.pageNav > .container > div > a:hover, .pageNav > .container > div > a.active {
+  outline-color: #D0DFD0;
+  color: #527D52;
+  transition: 0.08s;
+}
+@media (prefers-color-scheme: dark) {
+  .pageNav > .container > div > a:hover, .pageNav > .container > div > a.active {
+    color: #DEFEDE;
+    outline-color: #707F70;
+  }
+}
+.pageNav > .container > div > a.buttonPrimary {
+  background: #527D52;
+  color: #fff;
+  font-weight: bold;
+}
+
+.pageFooter {
+  opacity: 0.8;
+}
+.pageFooter > .SNS-Links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+.pageFooter > .SNS-Links > a {
+  display: flex;
+  gap: 8px;
+  font-size: 18px;
+  color: inherit;
+}
+.pageFooter > .SNS-Links > a img {
+  width: 1em;
+}
+@media (prefers-color-scheme: dark) {
+  .pageFooter > .SNS-Links > a img {
+    filter: invert(1);
+  }
+}
+.pageFooter > .SNS-Links > a:not(:hover, :focus) {
+  text-decoration: none;
+}
+
+/*# sourceMappingURL=style.css.map */
diff --git a/css/style.css.map b/css/style.css.map
new file mode 100644
index 0000000..cd7a615
--- /dev/null
+++ b/css/style.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["src/_fonts.scss","src/style.scss"],"names":[],"mappings":"AAEQ;AAER;EACE;;;AAGF;EACE;EACA;;;AAIF;EACE;;;ACbF;EACE;EACA;;AAEA;EAJF;IAKI;IACA;;;;AAIJ;EACE;EAEA;EAEA;EAEA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;AAEA;EAHF;IAII;;;AAGF;EACE;;;AAIJ;EACE,kBACE;EASF;EACA;EAEA;;AATA;EALF;IAMI,kBACA;;;AASF;EACE;EAEA;EACA;EAEA;EACA;;AAEA;EATF;IAUI;;;AAGF;EACE;EACA;EAEA;;AAEA;EACE;;AAEA;EAHF;IAII;;;AAGF;EACE;IAAM;;;AAGR;EACE;EACA;;AAIJ;EAKE;EACA;;AALA;EADF;IAEI;;;AAMF;EACE;EACA;;AAEA;EACE;EACA;EACA;;;AAQZ;EAIE;EAEA;EACA;EACA;EACA;EAEA;EACA;EAEA;EAEA;EAEA;EACA;EAEA;;AApBA;EADF;IAEI;;;;AAsBJ;EACE;EAEA;EACA;EAEA;;AAEA;EARF;IASI;IACA;;;AAGF;EACE;EAEA;EACA;EAEA;EACA;;AAEA;EATF;IAUI;IACA;IACA;IACA;IACA;IACA;IAEA;IAEA;;EAEA;IACE;IACA;IAEA;IAEA;;;AAIJ;EACE;EAEA;EACA;EAEA;;AAEA;EARF;IASI;IACA;IACA;IACA;;;AAGF;EACE;EAEA;EACA;EACA;EAUA;EAEA;EAEA;EAEA;EAEA;;AAhBA;EAPF;IAQI;IACA;IACA;IACA;;;AAcF;EAEE;EAEA;EAQA;;AANA;EANF;IAOI;IACA;;;AAOJ;EACE;EACA;EAEA;;;AAWV;EACE;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EAEA;EAEA;;AAEA;EACE;;AAEA;EAHF;IAII;;;AAIJ;EACE","file":"style.css"}
\ No newline at end of file