diff --git a/src/styles/flex.css b/src/styles/flex.css
deleted file mode 100644
index 4ecdb2d..0000000
--- a/src/styles/flex.css
+++ /dev/null
@@ -1,32 +0,0 @@
-.flex.container {
-    display: flex;
-}
-
-.flex.container.horizontal {
-    flex-direction: row;
-}
-
-.flex.container.vertical {
-    flex-direction: column;
-}
-
-.flex.container.middle {
-    align-items: center;
-}
-
-.flex.container.center {
-    justify-content: center;
-}
-
-.flex.item {
-    overflow: hidden;
-    /*display: inline-block;*/
-}
-
-.flex.item.grow {
-    flex: 1 0;
-}
-
-.flex.item.shrink {
-    flex: 0 1 auto;
-}
diff --git a/src/styles/flex.styl b/src/styles/flex.styl
new file mode 100644
index 0000000..5934ffb
--- /dev/null
+++ b/src/styles/flex.styl
@@ -0,0 +1,24 @@
+.flex
+  &.container
+    display flex
+
+    &.horizontal
+      flex-direction row
+
+    &.vertical
+      flex-direction column
+
+    &.middle
+      align-items center
+
+    &.center
+      justify-content center
+
+  &.item
+    overflow hidden
+
+    &.grow
+      flex 1 0
+
+    &.shrink
+      flex 0 1 auto
\ No newline at end of file
diff --git a/src/styles/global.css b/src/styles/global.css
deleted file mode 100644
index 0e212ed..0000000
--- a/src/styles/global.css
+++ /dev/null
@@ -1,146 +0,0 @@
-* {
-    box-sizing: border-box;
-    -webkit-overflow-scrolling: touch;
-    --clr-primary: hsl(194, 100%, 88%);
-    --clr-white: #ffffff;
-    --clr-black: #000000;
-    --clr-dark: #222222;
-    --clr-ligher: #eeeeee;
-    --text-width: 35rem;
-    --animation: all 100ms ease;
-    --small-shadow: 0 0.2em 0.5em -0.1em #00000014;
-    --icon-width: 1.5em;
-    scroll-behavior: smooth;
-}
-
-*[tabindex]:focus {
-    outline: none;
-}
-
-html, body {
-    padding: 0;
-    margin: 0;
-    font-family: Raleway, serif;
-    font-size: 1rem;
-}
-
-h1, h2, h3, h4, h5, h6 {
-    margin: 0;
-}
-
-a {
-    text-decoration: none;
-    color: inherit;
-}
-
-hr {
-    border: 0;
-    border-top: 1px solid #f5f5f5;
-    margin: 1em 0;
-}
-
-.fill {
-    height: 100%;
-    width: 100%;
-}
-
-.fill-v {
-    height: 100%;
-}
-
-.fill-h {
-    width: 100%;
-}
-
-.alt-font {
-    font-family: "Abril Fatface", serif;
-}
-
-.text-align-right {
-    text-align: right;
-}
-
-.text-align-left {
-    text-align: left;
-}
-
-.text-align-center {
-    text-align: center;
-}
-
-#app {
-    width: 100vw;
-    height: 100vh;
-    position: fixed;
-    overflow-x: auto;
-    background-color: var(--clr-white);
-}
-
-.view {
-    max-width: var(--text-width);
-}
-
-.tags {
-    margin-top: -.25em;
-}
-
-.tags > a.tag {
-    padding: .25em;
-    background: #eee;
-    border-radius: .25em;
-    display: inline-block;
-    margin-top: .25em;
-}
-
-.gohome {
-    padding: .5em;
-    align-self: center;
-    transition: var(--animation);
-}
-
-.gohome:hover {
-    transform: scale(1.5);
-}
-
-img.icon {
-    height: 1em;
-    display: inline-block;
-    vertical-align: middle;
-}
-
-.auto-width {
-    max-width: var(--text-width);
-    width: 100%;
-}
-
-.spacer {
-    height: 8em;
-}
-
-@media only screen and (max-width: 40em) {
-    .tags::-webkit-scrollbar {
-        width: 2px;
-        background: transparent;
-        height: 2px;
-    }
-
-    .tags::-webkit-scrollbar-thumb {
-        background: var(--clr-dark);
-        border-radius: 2px;
-    }
-
-    .tags {
-        display: flex;
-        flex-direction: row;
-        overflow: auto;
-    }
-
-    .tags > a.tag {
-        margin: .25em;
-        flex: 1 0 auto;
-    }
-
-    .gohome {
-        padding: .25em;
-    }
-}
\ No newline at end of file
diff --git a/src/styles/global.styl b/src/styles/global.styl
new file mode 100644
index 0000000..aa70492
--- /dev/null
+++ b/src/styles/global.styl
@@ -0,0 +1,121 @@
+*
+  box-sizing border-box
+  -webkit-overflow-scrolling touch
+  --clr-primary hsl(194, 100%, 88%)
+  --clr-white #ffffff
+  --clr-black #000000
+  --clr-dark #222222
+  --clr-ligher #eeeeee
+  --text-width 35rem
+  --animation all 100ms ease
+  --small-shadow 0 0.2em 0.5em -0.1em #00000014
+  --icon-width 1.5em
+  scroll-behavior smooth
+
+*[tabindex]:focus
+  outline none
+
+html, body
+  padding 0
+  margin 0
+  font-family Raleway, serif
+  font-size 1rem
+
+h1, h2, h3, h4, h5, h6
+  margin 0
+
+a
+  text-decoration none
+  color inherit
+
+hr
+  border 0
+  border-top 1px solid #f5f5f5
+  margin 1em 0
+
+.fill
+  height 100%
+  width 100%
+
+.fill-v
+  height 100%
+
+.fill-h
+  width 100%
+
+.alt-font
+  font-family "Abril Fatface", serif
+
+.text-align-right
+  text-align right
+
+.text-align-left
+  text-align left
+
+.text-align-center
+  text-align center
+
+#app
+  width 100vw
+  height 100vh
+  position fixed
+  overflow-x auto
+  background-color var(--clr-white)
+
+.view
+  max-width var(--text-width)
+
+.tags
+  margin-top -.25em
+
+  & > a
+    &.tag
+      padding .25em
+      background #eee
+      border-radius .25em
+      display inline-block
+      margin-top .25em
+
+.gohome
+  padding .5em
+  align-self center
+  transition var(--animation)
+
+  &:hover
+    transform scale(1.5)
+
+img
+  &.icon
+    height 1em
+    display inline-block
+    vertical-align middle
+
+.auto-width
+  max-width var(--text-width)
+  width 100%
+
+.spacer
+  height 8em
+
+@media only screen and (max-width: 40em)
+  .tags
+    display flex
+    flex-direction row
+    overflow auto
+
+    &::-webkit-scrollbar
+      width 2px
+      background transparent
+      height 2px
+
+    &::-webkit-scrollbar-thumb
+      background var(--clr-dark)
+      border-radius 2px
+
+    & > a
+      &.tag
+        margin .25em
+        flex 1 0 auto
+
+  .gohome
+    padding .25em
\ No newline at end of file
diff --git a/src/styles/home.css b/src/styles/home.css
deleted file mode 100644
index 4acf37c..0000000
--- a/src/styles/home.css
+++ /dev/null
@@ -1,93 +0,0 @@
-#home #header {
-    text-align: center;
-    margin-top: 8vmin;
-    margin-bottom: 16vmin;
-    padding: 0 2em;
-}
-
-#home #header h1 {
-    font-size: 12vw;
-    font-family: "Abril Fatface", serif;
-}
-
-#home #header h2 {
-    font-size: 5.5vw;
-}
-
-#home #list-container {
-}
-
-#home #list-header {
-}
-
-#home #list {
-    text-align: left;
-    width: 100%;
-    padding: 0 2em;
-}
-
-#home #list > .item {
-    padding: .25em 1em;
-    margin: 1.5em 0;
-    transition: all ease .1s;
-    border-radius: .5em;
-    display: block;
-}
-
-#home #list > .item .title {
-    margin-bottom: .25em;
-}
-
-#home #list > .item .thumbnail img {
-    width: 100%;
-    height: 12em;
-    object-fit: cover;
-    object-position: center;
-    border-radius: .5em;
-    transition: var(--animation);
-    transform: scale(1);
-}
-
-#home #list hr {
-    margin: 0 1.5em;
-}
-
-#home #lights img {
-    position: fixed;
-    top: .25em;
-    right: .25em;
-    transition: var(--animation);
-    height: var(--icon-width);
-}
-
-@media only screen and (min-width: 40em) {
-    #home #list {
-        width: var(--text-width);
-    }
-
-    #home #header h1 {
-        font-size: 5em;
-    }
-
-    #home #header h2 {
-        font-size: 2em;
-    }
-
-    #home #lights img{
-        top: .5em;
-        right: 1em;
-    }
-
-    #home #list > .item:hover {
-        box-shadow: var(--small-shadow);
-        transform: scale(1.05);
-        padding-bottom: 1em;
-    }
-
-    #home #list > .item:hover .thumbnail img {
-        transform: scale(1.2) translateY(-1em);
-        height: 16em;
-        margin: 1em 0;
-        box-shadow: var(--small-shadow);
-    }
-}
\ No newline at end of file
diff --git a/src/styles/home.styl b/src/styles/home.styl
new file mode 100644
index 0000000..c94ce8a
--- /dev/null
+++ b/src/styles/home.styl
@@ -0,0 +1,81 @@
+#home
+  #header
+    text-align center
+    margin-top 8vmin
+    margin-bottom 16vmin
+    padding 0 2em
+
+    h1
+      font-size 12vw
+      font-family "Abril Fatface", serif
+
+    h2
+      font-size 5.5vw
+
+  #list-container
+  #list-header
+  #list
+    text-align left
+    width 100%
+    padding 0 2em
+
+    & > .item
+      padding .25em 1em
+      margin 1.5em 0
+      transition all ease .1s
+      border-radius .5em
+      display block
+
+      .title
+        margin-bottom .25em
+
+      .thumbnail
+        img
+          width 100%
+          height 12em
+          object-fit cover
+          object-position center
+          border-radius .5em
+          transition var(--animation)
+          transform scale(1)
+
+    hr
+      margin 0 1.5em
+
+  #lights
+    img
+      position fixed
+      top .25em
+      right .25em
+      transition var(--animation)
+      height var(--icon-width)
+
+@media only screen and (min-width: 40em)
+  #home
+    #list
+      width var(--text-width)
+
+      & > .item
+        &:hover
+          box-shadow var(--small-shadow)
+          transform scale(1.05)
+          padding-bottom 1em
+
+          .thumbnail
+            img
+              transform scale(1.2) translateY(-1em)
+              height 16em
+              margin 1em 0
+              box-shadow var(--small-shadow)
+
+    #header
+      h1
+        font-size 5em
+
+      h2
+        font-size 2em
+
+    #lights
+      img
+        top .5em
+        right 1em
\ No newline at end of file
diff --git a/src/styles/index.styl b/src/styles/index.styl
index dfd4fa6..c47196d 100644
--- a/src/styles/index.styl
+++ b/src/styles/index.styl
@@ -1,6 +1,6 @@
-@require "./global.css"
+@require "./global.styl"
 @require "./fonts.css"
-@require "./flex.css"
-@require "./home.css"
-@require "./logos.css"
-@require "./singular.css"
\ No newline at end of file
+@require "./flex.styl"
+@require "./home.styl"
+@require "./logos.styl"
+@require "./singular.styl"
\ No newline at end of file
diff --git a/src/styles/logos.css b/src/styles/logos.css
deleted file mode 100644
index 40f8cba..0000000
--- a/src/styles/logos.css
+++ /dev/null
@@ -1,23 +0,0 @@
-#logos {
-    margin-top: 1.5em;
-}
-
-#logos > .title {
-    margin: 2em;
-    text-align: center;
-}
-
-#logos > .title img {
-    height: 1.5em;
-}
-
-#logos > .list img {
-    height: 2em;
-    width: 2em;
-    margin: 0 .5em;
-    transition: var(--animation);
-}
-
-#logos > .list img:hover {
-    transform: scale(1.15);
-}
\ No newline at end of file
diff --git a/src/styles/logos.styl b/src/styles/logos.styl
new file mode 100644
index 0000000..2a2ea3e
--- /dev/null
+++ b/src/styles/logos.styl
@@ -0,0 +1,19 @@
+#logos
+  margin-top: 1.5em
+
+  & > .title
+    margin: 2em
+    text-align: center
+
+    img
+      height: 1.5em
+
+  & > .list
+    img
+      height: 2em
+      width: 2em
+      margin: 0 .5em
+      transition: var(--animation)
+
+      &:hover
+        transform: scale(1.15)
\ No newline at end of file
diff --git a/src/styles/singular.css b/src/styles/singular.css
deleted file mode 100644
index 26d71b1..0000000
--- a/src/styles/singular.css
+++ /dev/null
@@ -1,139 +0,0 @@
-#singular #top img {
-    margin: .25em .25em;
-    vertical-align: middle;
-    transition: var(--animation);
-    height: var(--icon-width);
-}
-
-#singular #top img:hover {
-    transform: scale(1.5);
-}
-
-#singular #top img.reduce {
-    height: calc(var(--icon-width) * .8);
-}
-
-#singular #main {
-    padding-top: 8vw;
-    overflow-y: auto;
-    overflow-wrap: break-word;
-}
-
-#singular #main:after {
-    content: '';
-    height: 16vh;
-    display: block;
-}
-
-#singular #header {
-    text-align: center;
-    padding: 0 2em;
-    margin-bottom: 5vmin;
-}
-
-#singular #header {
-    max-width: 60em;
-    width: calc(100% - 2em);
-}
-
-#singular #header h1 {
-    font-size: 4vmax;
-}
-
-#singular #content h2 {
-    margin-top: 3em;
-}
-
-#singular #content h3 {
-    margin-top: 2em;
-}
-
-#singular #content h4, h5, h6 {
-    margin-top: 1em;
-}
-
-#singular #content {
-    width: 100%;
-    padding: 0 1em;
-}
-
-#singular #content > * {
-    max-width: var(--text-width);
-    width: 100%;
-    line-height: 1.5;
-}
-
-
-#singular #content .alignfull {
-    max-width: initial;
-    width: calc(100% + 4em);
-}
-
-#singular #content .alignwide {
-    max-width: 60em !important;
-    width: 100%;
-}
-
-#singular #main #content > * a {
-    border-bottom: 2px solid var(--clr-black);
-}
-
-#singular #content blockquote {
-    border-left: 2px solid var(--clr-black);
-    padding-left: .5em;
-}
-
-#singular #content blockquote > p {
-    margin: 0;
-}
-
-#singular #content blockquote > cite {
-    font-size: .75em;
-}
-
-#singular #content pre {
-    overflow: auto;
-    background-color: var(--clr-ligher);
-    padding: 1em;
-    border-radius: .25em;
-    overflow-wrap: initial;
-    tab-size: 4;
-}
-
-#singular #content p code {
-    background: var(--clr-ligher);
-    padding: 0.3em .5em;
-    border-radius: .25em;
-}
-
-#singular .links > div {
-    transform: rotate(180deg) scale(1);
-    writing-mode: vertical-rl;
-    padding: .25em;
-    height: 100%;
-    text-align: center;
-    cursor: pointer;
-    background: var(--clr-white);
-    transition: var(--animation);
-    width: 2em;
-    line-height: 1em;
-}
-
-#singular .links > div:hover {
-    transform: rotate(180deg) scale(1.5);
-}
-
-@media only screen and (min-width: 40em) {
-    #singular .links > div {
-        padding: 1em;
-        width: 3em;
-    }
-
-    #singular #top img {
-        margin: .25em .5em;
-    }
-
-    #singular #top {
-        padding: 0 .5em;
-    }
-}
\ No newline at end of file
diff --git a/src/styles/singular.styl b/src/styles/singular.styl
new file mode 100644
index 0000000..468f26c
--- /dev/null
+++ b/src/styles/singular.styl
@@ -0,0 +1,117 @@
+#singular
+  #top
+    img
+      margin .25em .25em
+      vertical-align middle
+      transition var(--animation)
+      height var(--icon-width)
+
+      &:hover
+        transform scale(1.5)
+
+      &.reduce
+        height calc(var(--icon-width) * .8)
+
+  #main
+    padding-top 8vw
+    overflow-y auto
+    overflow-wrap break-word
+
+    &:after
+      content ''
+      height 16vh
+      display block
+
+    #content
+      & > *
+        a
+          border-bottom 2px solid var(--clr-black)
+
+  #header
+    text-align center
+    padding 0 2em
+    margin-bottom 5vmin
+    max-width 60em
+    width calc(100% - 2em)
+
+    h1
+      font-size 4vmax
+
+  #content
+    width 100%
+    padding 0 1em
+
+    h2
+      margin-top 3em
+
+    h3
+      margin-top 2em
+
+    & > *
+      max-width var(--text-width)
+      width 100%
+      line-height 1.5
+
+    .alignfull
+      max-width initial
+      width calc(100% + 4em)
+
+    .alignwide
+      max-width 60em !important
+      width 100%
+
+    blockquote
+      border-left 2px solid var(--clr-black)
+      padding-left .5em
+
+      & > p
+        margin 0
+
+      & > cite
+        font-size .75em
+
+    pre
+      overflow auto
+      background-color var(--clr-ligher)
+      padding 1em
+      border-radius .25em
+      overflow-wrap initial
+      tab-size 4
+
+    p
+      code
+        background var(--clr-ligher)
+        padding 0.3em .5em
+        border-radius .25em
+
+  .links
+    & > div
+      transform rotate(180deg) scale(1)
+      writing-mode vertical-rl
+      padding .25em
+      height 100%
+      text-align center
+      cursor pointer
+      background var(--clr-white)
+      transition var(--animation)
+      width 2em
+      line-height 1em
+
+      &:hover
+        transform rotate(180deg) scale(1.5)
+
+#singular #content h4, h5, h6
+  margin-top 1em
+
+@media only screen and (min-width: 40em)
+  #singular
+    .links
+      & > div
+        padding 1em
+        width 3em
+
+    #top
+      padding 0 .5em
+
+      img
+        margin .25em .5em
\ No newline at end of file