diff --git a/homepage/requirements.txt b/homepage/requirements.txt
index a62e2d6..575200b 100644
--- a/homepage/requirements.txt
+++ b/homepage/requirements.txt
@@ -2,3 +2,4 @@ pelican==4.0.1
 markdown==3.1.1
 webassets==0.12.1
 cssmin==0.2.0
+libsass==0.19.3
diff --git a/homepage/theme/static/css/style.css b/homepage/theme/static/css/style.scss
similarity index 87%
rename from homepage/theme/static/css/style.css
rename to homepage/theme/static/css/style.scss
index 0e95044..c0ba552 100644
--- a/homepage/theme/static/css/style.css
+++ b/homepage/theme/static/css/style.scss
@@ -3,16 +3,13 @@
 /* ---------------------------------------------------
 ROOTS
 ----------------------------------------------------*/
-:root {
---yellow-mid: #F7BF08;
---yellow-bright: #fde28c;
---mint-mid: #BBD9D3;
---black-mid: #39352A;
---grey-mid: #898989;
---grey-bright: #D5D5D5;
---white: #FFF;
-}
-
+$yellow-mid: #F7BF08;
+$yellow-bright: #fde28c;
+$mint-mid: #BBD9D3;
+$black-mid: #39352A;
+$grey-mid: #898989;
+$grey-bright: #D5D5D5;
+$white: #FFF;
 
 /* ---------------------------------------------------
 BASICS
@@ -34,28 +31,28 @@ LAYOUT & SPACER
   z-index: 1;
   top: 0;
   right: 0;
-  background-color: var(--yellow-mid);
+  background-color: $yellow-mid;
 }
 .intro {
   width: 100%;
   margin: 70px 0 0 0;
-  background-color: var(--yellow-mid);
+  background-color: $yellow-mid;
 }
 .feature {
   width: 100%;
 }
 .cta-top {
   width: 100%;
-  color: var(--yellow-mid);
+  color: $yellow-mid;
 }
 .content {
   width: 100%;
   margin: 70px 0 0 0;
-  background-color: var(--white);
+  background-color: $white;
 }
 .content-index {
   width: 100%;
-  background-color: var(--white);
+  background-color: $white;
 }
 .cta-bottom,
 .outro {
@@ -64,8 +61,8 @@ LAYOUT & SPACER
 .footer {
   width: 100%;
   min-height: 300px;
-  color: var(--grey-mid);
-  background-color: var(--black-mid);
+  color: $grey-mid;
+  background-color: $black-mid;
 }
 .spacer-intro {
   width: 430px;
@@ -135,7 +132,7 @@ CARDS
 }
 .card {
   max-width: 300px;
-  color: var(--black-mid);
+  color: $black-mid;
 }
 .card h2,
 .card p {
@@ -199,25 +196,25 @@ CARDS
 TYPO
 ----------------------------------------------------*/
 body {
-  background-color: var(--white);
+  background-color: $white;
   font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
   line-height: 1.5;
   font-weight: 400;
   word-wrap: break-word;
-  color: var(--grey-mid);
+  color: $grey-mid;
 }
 h1,
 h2 {
   font-weight: 700;
   line-height: 1.3;
-  color: var(--black-mid);
+  color: $black-mid;
 }
 h3,
 h4 {
   font-size: 14px;
   font-weight: 400;
-  color: var(--black-mid);
+  color: $black-mid;
 }
 h3 {
   margin: 0 0 20px 0;
@@ -226,7 +223,7 @@ p + h3 {
   margin: 60px 0 20px 0;
 }
 h4 {
-  color: var(--grey-mid);
+  color: $grey-mid;
 }
 /* Desktop Styles */
 @media only screen and (min-width: 481px) {
@@ -257,7 +254,7 @@ LINKS
 a,
 a:hover,
 a:focus {
-  color: var(--grey-mid);
+  color: $grey-mid;
   text-decoration: none;
 }
 p a,
@@ -268,7 +265,7 @@ p a:focus {
 ol li p a,
 ol li p a:hover,
 ol li p a:focus {
-color: var(--grey-bright);
+color: $grey-bright;
 }
 
 
@@ -276,7 +273,7 @@ color: var(--grey-bright);
 TYPO ELEMENTS
 ----------------------------------------------------*/
 h1 + p {
-  color: var(--black-mid);
+  color: $black-mid;
 }
 .bg h2 {
   margin: 0 0 10px 0;
@@ -294,11 +291,11 @@ h1 + p {
 }
 #bg-cta-top h2,
 #bg-cta-top p {
-  color: var(--white);
+  color: $white;
 }
 #bg-outro h2,
 #bg-outro p {
-  color: var(--black-mid);
+  color: $black-mid;
 }
 strong,
 h1 + p strong,
@@ -307,16 +304,16 @@ h1 + p strong,
 }
 .container-reader h2 {
   margin: 0 0 20px 0;
-  color: var(--grey-bright);
+  color: $grey-bright;
 }
 strong,
 h3 strong {
   text-decoration: none;
   font-weight: 400;
-  color: var(--black-mid);
+  color: $black-mid;
 }
 .cta-top strong {
-  color: var(--white);
+  color: $white;
 }
 .content-index p,
 .content p {
@@ -325,32 +322,32 @@ h3 strong {
 hr {
   height: 0;
   margin: 80px 0 20px 0;
-  border-top: 1px solid var(--grey-bright);
+  border-top: 1px solid $grey-bright;
 }
 blockquote {
   margin: 0;
   padding: 0 0 0 20px;
   font-style: italic;
-  border-left: 1px solid var(--grey-bright);
+  border-left: 1px solid $grey-bright;
 }
 ol {
   padding-inline-start: 20px;
 }
 em {
-  background: linear-gradient(transparent 66%, var(--yellow-bright) 66%);
+  background: linear-gradient(transparent 66%, $yellow-bright 66%);
   font-style: normal;
 }
 .footer-card h3 strong {
   font-weight: 700;
-  color: var(--yellow-mid);
+  color: $yellow-mid;
 }
 .footer h3,
 .footer h4 {
-  color: var(--yellow-mid);
+  color: $yellow-mid;
   margin: 0 0 2px 0;
 }
 .footnote {
-  color: var(--grey-bright);
+  color: $grey-bright;
 }
 /* reposition for fixed menu */
 .footnote li {
@@ -379,8 +376,8 @@ BUTTONS
 .btn-color-yellow:hover,
 .btn-color-yellow:active {
   font-weight: 700;
-  color: var(--yellow-mid);
-  border: solid var(--yellow-mid) 5px;
+  color: $yellow-mid;
+  border: solid $yellow-mid 5px;
 }
 .btn-color-black,
 .btn-color-black:visited,
@@ -388,8 +385,8 @@ BUTTONS
 .btn-color-black:hover,
 .btn-color-black:active {
   font-weight: 700;
-  color: var(--black-mid);
-  border: solid var(--black-mid) 5px;
+  color: $black-mid;
+  border: solid $black-mid 5px;
 }
 .btn-color-white,
 .btn-color-white:visited,
@@ -397,8 +394,8 @@ BUTTONS
 .btn-color-white:hover,
 .btn-color-white:active {
   font-weight: 700;
-  color: var(--white);
-  border: solid var(--white) 5px;
+  color: $white;
+  border: solid $white 5px;
 }
 
 
@@ -442,12 +439,12 @@ nav ul li a:visited {
   line-height: 70px;
   text-decoration: none;
   font-weight: 700;
-  background: var(--yellow-mid);
-  color: var(--black-mid);
+  background: $yellow-mid;
+  color: $black-mid;
 }
 nav ul li a:hover,
 nav ul li a:visited:hover {
-  color: var(--black-mid);
+  color: $black-mid;
 }
 nav ul li a:not(:only-child):after,
 nav ul li a:visited:not(:only-child):after {
@@ -471,7 +468,7 @@ nav ul li ul li a {
   position: absolute;
   top: 0;
   right: 0;
-  background: var(--yellow-mid);
+  background: $yellow-mid;
   height: 70px;
   width: 70px;
 }
@@ -531,7 +528,7 @@ nav ul li ul li a {
   border-radius: 1px;
   height: 2px;
   width: 25px;
-  background: var(--black-mid);
+  background: $black-mid;
   position: absolute;
   display: block;
   content: '';
diff --git a/homepage/theme/templates/base.html b/homepage/theme/templates/base.html
index e83e59e..1bafbee 100644
--- a/homepage/theme/templates/base.html
+++ b/homepage/theme/templates/base.html
@@ -19,7 +19,7 @@
   <meta name="twitter:card" content="summary_large_image">
   <link rel="canonical" href="{{ SITEURL }}/{{ page.save_as }}">
   <link rel="shortcut icon" type="image/x-icon" href="/theme/images/favicon.ico">
-  {% assets filters="cssmin", output="css/style.min.css", "css/normalize.css", "css/fonts.css", "css/style.css" %}
+  {% assets filters="libsass,cssmin", output="css/style.min.css", "css/normalize.css", "css/fonts.css", "css/style.scss" %}
     <link rel="stylesheet" href="/{{ ASSET_URL }}">
   {% endassets %}
   {% if OFFEN_ACCOUNT_ID and not page.no_stats %}