diff --git a/styles/sass/style.sass b/styles/sass/style.sass
new file mode 100644
index 0000000..c06d2be
--- /dev/null
+++ b/styles/sass/style.sass
@@ -0,0 +1,244 @@
+@use "sass:color"
+
+$bg: #FFFDF3
+$bg0: #{color.adjust($bg, $lightness: -5%, $hue: -7deg, $saturation: -50%)}
+$fg: #011627
+
+:root
+  --bg: #{$bg}
+  --fg: #{$fg}
+
+body
+  font-family: 'Nunito', 'K Gothic', sans-serif
+  margin: 0
+  display: flex
+  width: 100%
+  height: 100vh
+  box-sizing: border-box
+  padding: 2em
+  background: $bg0
+  color: var(--fg)
+  font-size: 1.25em
+
+#content, dialog
+  background: var(--bg)
+  box-shadow: 0 0 16px rgba(0, 0, 0, 0.125)
+  border: none
+  border-radius: 4px
+
+input[type=number]
+  background: var(--bg)
+  color: var(--fg)
+  border: none
+  outline: none
+  font: inherit
+  text-align: center
+  width: 4em
+  appearance: textfield
+
+#content
+  width: 100%
+  height: 100%
+  display: grid
+  grid-template-areas: "nav        nav" "challenge  submissions"
+  grid-template-columns: 30em auto
+  grid-template-rows: min-content auto
+  overflow: hidden
+
+  nav
+    grid-area: nav
+    --bg: #{$fg}
+    --fg: #{$bg}
+    background: var(--bg)
+    color: var(--fg)
+    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.125)
+    display: flex
+
+    .dropdown
+      position: relative
+      display: flex
+      padding: 0
+
+      .dropdown-content
+        flex-direction: column
+        position: absolute
+        top: 100%
+        right: 0
+        min-width: 100%
+
+      &:not(:hover) .dropdown-content
+        display: none !important
+
+    & > *, .dropdown .link
+      padding: 0.45em
+
+      & > *
+        vertical-align: middle
+
+    .link
+      color: var(--fg)
+      font-weight: bold
+      white-space: nowrap
+
+    & > .right
+      margin-left: auto
+
+    img
+      height: 32px
+      border-radius: 100%
+
+  & > div
+    overflow: scroll
+    display: flex
+    flex-direction: column
+    gap: 1em
+
+    footer
+      margin-top: auto
+      text-align: center
+
+  #challenge
+    padding: 1em
+
+*
+  box-sizing: border-box !important
+
+#submissions
+  grid-area: submissions
+  background: rgba(0, 0, 0, 0.125)
+  padding: 1em
+
+  & > div
+    width: 100%
+    column-count: 3
+    margin: 0
+
+    $gap: 0.5em
+
+    gap: $gap
+
+    & > figure
+      background: rgba(0, 0, 0, 0.125)
+      padding: $gap
+      width: 100%
+      box-sizing: border-box
+      margin: 0
+      margin-bottom: $gap
+      break-inside: avoid-column
+      text-align: center
+
+      & > img
+        width: 100%
+        cursor: pointer
+
+        &:hover
+          border: none
+          filter: brightness(1.25)
+
+.dropdown:hover > .link, nav > .link:hover
+  border: none
+  --fg: #{$fg}
+  --bg: #{$bg}
+  background: var(--bg)
+  cursor: pointer
+
+.svg-inline
+  height: 1em
+  vertical-align: -0.125em
+
+a
+  text-decoration: none
+
+  &:hover
+    border-bottom: 2px solid
+
+  &.noun
+    color: #a6e3a1
+
+  &.adjective
+    color: #f38ba8
+
+  &.verb
+    color: #87b0f9
+
+  &.adverb
+    color: #94e2d5
+
+  &.particle
+    color: #f9e2af
+
+  &.phrase
+    color: #fab387
+
+.servers
+  display: flex
+  gap: 0.5em
+
+  & > :not(.recommended)
+    // To match the missing recommended label
+    padding-bottom: 1em
+
+  & > *
+    display: flex
+    flex-direction: column
+    gap: 0.5em
+    border: 2px solid
+    border-radius: 0.5em
+    padding: 0.5em
+    width: 100%
+    align-items: center
+    text-align: center
+
+    img
+      width: 96px
+      border-radius: 100%
+      border: 2px solid
+
+    .name
+      display: flex
+      flex-grow: 1
+      align-items: center
+
+    .joinButton
+      display: inline
+      background: seagreen
+      color: white
+      font: inherit
+      font-weight: bold
+      border: none
+      outline: none
+      padding: 0.25em 0.5em 0.25em 0.5em
+      border-radius: 2px
+
+      &:disabled, &.disabled
+        background: gray
+
+  .recommended
+    border-color: mediumseagreen
+
+    .label-wrapper
+      height: 0
+
+      .label
+        position: relative
+        width: fit-content
+        border: auto
+        bottom: 0px
+        background: mediumseagreen
+        color: white
+        font-weight: bold
+        font-size: 0.75em
+        text-transform: uppercase
+        padding: 0 0.5em 0 0.5em
+        border-radius: 2px
+        user-select: none
+
+.icon
+  height: 1.5em
+  vertical-align: middle
+
+h1
+  text-align: center
+
+  &:first-child
+    margin-top: 0
diff --git a/styles/sass/style.scss b/styles/sass/style.scss
deleted file mode 100644
index 900367c..0000000
--- a/styles/sass/style.scss
+++ /dev/null
@@ -1,280 +0,0 @@
-@use "sass:color";
-
-$bg: #FFFDF3;
-$bg0: #{color.adjust($bg, $lightness: -5%, $hue: -7deg, $saturation: -50%)};
-$fg: #011627;
-
-:root {
-  --bg: #{$bg};
-  --fg: #{$fg};
-}
-
-body {
-  font-family: 'Nunito', 'K Gothic', sans-serif;
-  margin: 0;
-  display: flex;
-  width: 100%;
-  height: 100vh;
-  box-sizing: border-box;
-  padding: 2em;
-  background: $bg0;
-  color: var(--fg);
-  font-size: 1.25em;
-}
-
-#content, dialog {
-  background: var(--bg);
-  box-shadow: 0 0 16px rgba(0, 0, 0, 0.125);
-  border: none;
-  border-radius: 4px;
-}
-
-input[type=number] {
-  background: var(--bg);
-  color: var(--fg);
-  border: none;
-  outline: none;
-  font: inherit;
-  text-align: center;
-  width: 4em;
-  appearance: textfield;
-}
-
-#content {
-  width: 100%;
-  height: 100%;
-
-  display: grid;
-  grid-template-areas:
-    "nav        nav"
-    "challenge  submissions";
-  grid-template-columns: 30em auto;
-  grid-template-rows: min-content auto;
-
-  overflow: hidden;
-
-  nav {
-    grid-area: nav;
-
-    --bg: #{$fg};
-    --fg: #{$bg};
-    background: var(--bg);
-    color: var(--fg);
-    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.125);
-
-    display: flex;
-
-    .dropdown {
-      position: relative;
-      display: flex;
-      padding: 0;
-
-      .dropdown-content {
-        flex-direction: column;
-        position: absolute;
-        top: 100%;
-        right: 0;
-        min-width: 100%;
-      }
-
-      &:not(:hover) .dropdown-content {
-        display: none !important;
-      }
-    }
-
-    & > *, .dropdown .link {
-      padding: 0.45em;
-
-      & > * {
-        vertical-align: middle;
-      }
-    }
-
-    .link {
-      color: var(--fg);
-      font-weight: bold;
-      white-space: nowrap;
-    }
-
-    & > .right {
-      margin-left: auto;
-    }
-
-    img {
-      height: 32px;
-      border-radius: 100%;
-    }
-  }
-
-  & > div {
-    overflow: scroll;
-    display: flex;
-    flex-direction: column;
-    gap: 1em;
-
-    footer {
-      margin-top: auto;
-      text-align: center;
-    }
-  }
-
-  #challenge {
-    padding: 1em;
-  }
-}
-
-* {
-  box-sizing: border-box !important;
-}
-
-#submissions {
-  grid-area: submissions;
-
-  background: rgba(0, 0, 0, 0.125);
-  padding: 1em;
-
-  & > div {
-    width: 100%;
-    column-count: 3;
-    margin: 0;
-    
-    $gap: 0.5em;
-    gap: $gap;
-
-    & > figure {
-      background: rgba(0, 0, 0, 0.125);
-      padding: $gap;
-      width: 100%;
-      box-sizing: border-box;
-      margin: 0;
-      margin-bottom: $gap;
-      break-inside: avoid-column;
-      text-align: center;
-
-      & > img {
-        width: 100%;
-        cursor: pointer;
-        &:hover {
-          border: none;
-          filter: brightness(1.25);
-        }
-      }
-    }
-  }
-}
-
-.dropdown:hover > .link, nav > .link:hover {
-  border: none;
-  --fg: #{$fg};
-  --bg: #{$bg};
-  background: var(--bg);
-  cursor: pointer;
-}
-
-.svg-inline {
-  height: 1em;
-  vertical-align: -0.125em;
-}
-
-a {
-  text-decoration: none;
-  &:hover {
-    border-bottom: 2px solid;
-  }
-  &.noun {
-    color: #a6e3a1;
-  }
-  &.adjective {
-    color: #f38ba8;
-  }
-  &.verb {
-    color: #87b0f9;
-  }
-  &.adverb {
-    color: #94e2d5;
-  }
-  &.particle {
-    color: #f9e2af;
-  }
-  &.phrase {
-    color: #fab387;
-  }
-}
-
-.servers {
-  display: flex;
-  gap: 0.5em;
-  & > :not(.recommended) {
-    // To match the missing recommended label
-    padding-bottom: 1em;
-  }
-  & > * {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5em;
-    border: 2px solid;
-    border-radius: 0.5em;
-    padding: 0.5em;
-    width: 100%;
-    align-items: center;
-    text-align: center;
-    img {
-      width: 96px;
-      border-radius: 100%;
-      border: 2px solid;
-    }
-    .name {
-      display: flex;
-      flex-grow: 1;
-      align-items: center;
-    }
-    .joinButton {
-      display: inline;
-      background: seagreen;
-      color: white;
-      font: inherit;
-      font-weight: bold;
-      border: none;
-      outline: none;
-      padding: 0.25em 0.5em 0.25em 0.5em;
-      border-radius: 2px;
-
-      &:disabled, &.disabled {
-        background: gray;
-      }
-    }
-  }
-  .recommended {
-    border-color: mediumseagreen;
-    .label-wrapper {
-      height: 0;
-      .label {
-        position: relative;
-        width: fit-content;
-        border: auto;
-        bottom: 0px;
-        background: mediumseagreen;
-        color: white;
-        font-weight: bold;
-        font-size: 0.75em;
-        text-transform: uppercase;
-        padding: 0 0.5em 0 0.5em;
-        border-radius: 2px;
-        user-select: none;
-      }
-    }
-  }
-}
-
-.icon {
-  height: 1.5em;
-  vertical-align: middle;
-}
-
-h1 {
-  text-align: center;
-
-  &:first-child {
-    margin-top: 0;
-  }
-}
\ No newline at end of file