diff --git a/assets/css/main.css b/assets/styles.scss
similarity index 80%
rename from assets/css/main.css
rename to assets/styles.scss
index 6d42094..d8f84fd 100644
--- a/assets/css/main.css
+++ b/assets/styles.scss
@@ -1,6 +1,14 @@
-body {
+$border: #999;
+
+* {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+html, button, input, select, textarea {
     font-family: "-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji";
-    font-size: 16px;
+    line-height: 1.5;
 }
 
 div,
@@ -22,16 +30,14 @@ p {
 header {
     margin: 0;
     padding: 0;
-    border-bottom: 1px solid #999;
-    line-height: 1
-}
-
-header h1 {
-    font-size: 160%;
-}
-
-header h2 {
-    font-size: 120%;
+    border-bottom: 1px solid $border;
+    line-height: 1;
+    h1 {
+        font-size: 160%;
+    }
+    h2 {
+        font-size: 120%;
+    }
 }
 
 main {
@@ -41,7 +47,7 @@ main {
 footer {
     margin: 0;
     padding: 10px 0;
-    border-top: 1px solid #999;
+    border-top: 1px solid $border;
     line-height: 1;
     text-align: center
 }
@@ -75,7 +81,7 @@ img {
 
 hr {
     border: none;
-    border-top: 1px dashed #999;
+    border-top: 1px dashed $border;
     color: #fff;
     background-color: #fff;
     height: 1px
@@ -141,7 +147,7 @@ td {
 }
 
 code {
-    border: 1px dotted #999;
+    border: 1px dotted $border;
     background-color: #f0f0f0;
     padding: 1px 2px;
     line-height: 200%;
@@ -149,7 +155,7 @@ code {
 }
 
 pre {
-    border: 1px solid #999;
+    border: 1px solid $border;
     background-color: #f0f0f0;
     padding: 5px;
     overflow: auto
@@ -248,39 +254,17 @@ nav#TableOfContents ul {
     padding: 0
 }
 
-.content h1 {
-    padding: 0;
-    margin: 25px 0 0
-}
-
-.content h2 {
-    padding: 0;
-    margin: 20px 0 0
-}
-
-.content h3 {
-    padding: 0;
-    margin: 20px 0 0
-}
-
-.content h4 {
-    padding: 0;
-    margin: 15px 0 0
-}
-
-.content h5 {
-    padding: 0;
-    margin: 10px 0 0
-}
-
-.content h6 {
-    padding: 0;
-    margin: 10px 0 0
-}
-
-.content p {
-    padding: 0;
-    margin: 10px 0
+.content {
+    h1,h2,h3,h4,h5,h6,p {
+        padding: 0;
+    }
+    h1 { margin: 25px 0 0 }
+    h2 { margin: 20px 0 0 }
+    h3 { margin: 20px 0 0 }
+    h4 { margin: 15px 0 0 }
+    h5 { margin: 10px 0 0 }
+    h6 { margin: 10px 0 0 }
+    p { margin: 10px 0 }
 }
 
 .article-list li {
@@ -297,7 +281,6 @@ nav#TableOfContents ul {
 }
 
 @media (max-width:500px) {
-
     .article-list li .article-date,
     .article-date li .article-title {
         display: block;
@@ -309,9 +292,12 @@ nav#TableOfContents ul {
 }
 
 @media (prefers-color-scheme: dark) {
+    $fg: #ccc;
+    $bg: #222;
+    $bgBright: #333;
     body {
-        color: #ccc;
-        background-color: #222;
+        color: $fg;
+        background-color: $bg;
     }
 
     header a, header a:visited,
@@ -319,7 +305,7 @@ nav#TableOfContents ul {
     h1 a, h1 a:visited, h2 a, h2 a:visited,
     h3 a, h3 a:visited, h4 a, h4 a:visited,
     h5 a, h5 a:visited, h6 a, h6 a:visited {
-        color: #ccc;
+        color: $fg;
     }
 
     header a:hover, footer a:hover,
@@ -329,17 +315,17 @@ nav#TableOfContents ul {
         color: #f80;
     }
     code {
-        border-color: #333;
-        background-color: #333;
+        border-color: $bgBright;
+        background-color: $bgBright;
         padding: 1px 2px;
         line-height: 200%;
         word-wrap: break-word
     }
 
     hr {
-        background-color: #999;
+        background-color: $border;
         border: none;
-        color: #222;
+        color: $bg;
         height: 1px;
     }
 }
diff --git a/themes/default/layouts/_default/baseof.html b/themes/default/layouts/_default/baseof.html
index e00fa6b..74eedce 100644
--- a/themes/default/layouts/_default/baseof.html
+++ b/themes/default/layouts/_default/baseof.html
@@ -6,7 +6,7 @@
   <base href="{{ .Site.BaseURL }}">
 {{ partial "html-meta.html" . -}}
   <title>{{ if not .IsHome }}{{ .Title }} - {{ end }}{{ .Site.Title }}</title>
-{{ $ss := resources.Get "css/main.css" | resources.ToCSS | resources.Minify | resources.Fingerprint }}
+{{ $ss := resources.Get "styles.scss" | resources.ToCSS (dict "enableSourceMap" true) | resources.Minify | resources.Fingerprint }}
 <link rel="stylesheet" href="{{ $ss.Permalink }}">
 {{ with .Site.Params.favicon -}}
   <link rel="shortcut icon" href="{{ . }}" type="image/x-icon">