diff --git a/src/themes/basic/_coverpage.css b/src/themes/basic/_coverpage.css
index 9d5aa7f2..a5f4b061 100644
--- a/src/themes/basic/_coverpage.css
+++ b/src/themes/basic/_coverpage.css
@@ -72,16 +72,16 @@ section.cover {
 
   .cover-main > p:last-child a {
     border-color: var(--theme-color, $color-primary);
-    border-radius: 2em;
+    border-radius: 2rem;
     border-style: solid;
     border-width: 1px;
     box-sizing: border-box;
     color: var(--theme-color, $color-primary);
     display: inline-block;
-    font-size: 1.05em;
-    letter-spacing: 0.1em;
-    margin-right: 1em;
-    padding: 0.75em 2em;
+    font-size: 1.05rem;
+    letter-spacing: 0.1rem;
+    margin-right: 1rem;
+    padding: 0.75em 2rem;
     text-decoration: none;
     transition: all 0.15s ease;
 
diff --git a/src/themes/basic/_layout.css b/src/themes/basic/_layout.css
index e8593030..9c6408ba 100644
--- a/src/themes/basic/_layout.css
+++ b/src/themes/basic/_layout.css
@@ -27,7 +27,7 @@ div#app {
 }
 
 .emoji {
-  height: 1.2em;
+  height: 1.2rem;
   vertical-align: middle;
 }
 
@@ -100,7 +100,7 @@ nav.app-nav {
   }
 
   >a {
-    margin: 0 1em;
+    margin: 0 1rem;
     padding: 5px 0;
   }
 
@@ -129,7 +129,7 @@ nav.app-nav {
   /* navbar dropdown */
   li {
     display: inline-block;
-    margin: 0 1em;
+    margin: 0 1rem;
     padding: 5px 0;
     position: relative;
 
@@ -152,7 +152,7 @@ nav.app-nav {
       li {
         display: block;
         font-size: 14px;
-        line-height: 1em;
+        line-height: 1rem;
         margin: 0;
         margin: 8px 14px;
         white-space: nowrap;
@@ -229,8 +229,8 @@ main {
   z-index: 20;
 
   > h1 {
-    margin: 0 auto 1em;
-    font-size: 1.5em;
+    margin: 0 auto 1rem;
+    font-size: 1.5rem;
     font-weight: 300;
     text-align: center;
 
@@ -348,7 +348,7 @@ body.sticky {
   border-collapse: collapse;
   border-spacing: 0;
   display: block;
-  margin-bottom: 1em;
+  margin-bottom: 1rem;
   overflow: auto;
   width: 100%;
 }
@@ -408,7 +408,7 @@ body.sticky {
 .markdown-section p.warn {
   background: rgba($color-primary, 0.1);
   border-radius: 2px;
-  padding: 1em;
+  padding: 1rem;
 }
 
 body.close {
diff --git a/src/themes/buble.css b/src/themes/buble.css
index f70e6c0e..033a4d46 100644
--- a/src/themes/buble.css
+++ b/src/themes/buble.css
@@ -3,7 +3,7 @@
 $color-primary: #0074D9;
 $color-bg: #fff;
 $color-text: #34495e;
-$sidebar-width: 16em;
+$sidebar-width: 16rem;
 
 @import "basic/layout";
 @import "basic/coverpage";
@@ -21,7 +21,7 @@ $sidebar-width: 16em;
   li {
     list-style: none;
     margin: 0;
-    padding: 0.2em 0 0.2em 1em;
+    padding: 0.2em 0 0.2em 1rem;
   }
 
   ul li ul {
@@ -54,40 +54,40 @@ $sidebar-width: 16em;
 .markdown-section p,
 .markdown-section ul,
 .markdown-section ol {
-  line-height: 1.6em;
+  line-height: 1.6rem;
   margin: 0 0 1em 0;
-  word-spacing: 0.05em;
+  word-spacing: 0.05rem;
 }
 
 .markdown-section h1 {
-  font-size: 2em;
+  font-size: 2rem;
   font-weight: 500;
-  margin: 0 0 1em;
+  margin: 0 0 1rem;
 }
 
 .markdown-section h2 {
-  font-size: 1.8em;
+  font-size: 1.8rem;
   font-weight: 400;
   margin: 0 0 1rem 0;
   padding: 1rem 0 0 0;
 }
 
 .markdown-section h3 {
-  font-size: 1.5em;
-  margin: 52px 0 1.2em;
+  font-size: 1.5rem;
+  margin: 52px 0 1.2rem;
 }
 
 .markdown-section h4 {
-  font-size: 1.25em;
+  font-size: 1.25rem;
 }
 
 .markdown-section h5 {
-  font-size: 1em;
+  font-size: 1rem;
 }
 
 .markdown-section h6 {
   color: #777;
-  font-size: 1em;
+  font-size: 1rem;
 }
 
 .markdown-section figure,
@@ -99,7 +99,7 @@ $sidebar-width: 16em;
 
 .markdown-section ul,
 .markdown-section ol {
-  padding-left: 1.5em;
+  padding-left: 1.5rem;
 }
 
 .markdown-section li {
@@ -131,7 +131,7 @@ $sidebar-width: 16em;
   background-color: #f9f9f9;
   border-radius: 3px;
   font-family: Inconsolata;
-  padding: 0.2em 0.4em;
+  padding: 0.2em 0.4rem;
   white-space: pre;
 }
 
@@ -221,7 +221,7 @@ $sidebar-width: 16em;
   border-radius: 2px;
   display: block;
   font-family: Inconsolata;
-  line-height: 1.1em;
+  line-height: 1.1rem;
   max-width: inherit;
   overflow: inherit;
   padding: 20px 0.8em 20px;
@@ -229,11 +229,11 @@ $sidebar-width: 16em;
 }
 
 .markdown-section code::after, .markdown-section code::before {
-  letter-spacing: 0.05em;
+  letter-spacing: 0.05rem;
 }
 
 code .token {
   -webkit-font-smoothing: initial;
   -moz-osx-font-smoothing: initial;
-  min-height: 1.5em;
+  min-height: 1.5rem;
 }
diff --git a/src/themes/dark.css b/src/themes/dark.css
index 5ee25855..45245899 100644
--- a/src/themes/dark.css
+++ b/src/themes/dark.css
@@ -50,7 +50,7 @@ body {
 .markdown-section h3,
 .markdown-section h4,
 .markdown-section strong {
-  color: #2c3e50;
+  color: #657b83;
   font-weight: 600;
 }
 
@@ -60,31 +60,31 @@ body {
 }
 
 .markdown-section h1 {
-  font-size: 2em;
-  margin: 0 0 1em;
+  font-size: 2rem;
+  margin: 0 0 1rem;
 }
 
 .markdown-section h2 {
-  font-size: 1.75em;
-  margin: 45px 0 0.8em;
+  font-size: 1.75rem;
+  margin: 45px 0 0.8rem;
 }
 
 .markdown-section h3 {
-  font-size: 1.5em;
-  margin: 40px 0 .6em;
+  font-size: 1.5rem;
+  margin: 40px 0 .6rem;
 }
 
 .markdown-section h4 {
-  font-size: 1.25em;
+  font-size: 1.25rem;
 }
 
 .markdown-section h5 {
-  font-size: 1em;
+  font-size: 1rem;
 }
 
 .markdown-section h6 {
   color: #777;
-  font-size: 1em;
+  font-size: 1rem;
 }
 
 .markdown-section figure,
@@ -97,13 +97,13 @@ body {
 .markdown-section p,
 .markdown-section ul,
 .markdown-section ol {
-  line-height: 1.6em;
-  word-spacing: 0.05em;
+  line-height: 1.6rem;
+  word-spacing: 0.05rem;
 }
 
 .markdown-section ul,
 .markdown-section ol {
-  padding-left: 1.5em;
+  padding-left: 1.5rem;
 }
 
 .markdown-section blockquote {
@@ -131,7 +131,7 @@ body {
   border-radius: 2px;
   color: #657b83;
   font-family: 'Roboto Mono', Monaco, courier, monospace;
-  font-size: 0.8em;
+  font-size: 0.8rem;
   margin: 0 2px;
   padding: 3px 5px;
   white-space: nowrap;
@@ -142,10 +142,10 @@ body {
   -webkit-font-smoothing: initial;
   background-color: #282828;
   font-family: 'Roboto Mono', Monaco, courier, monospace;
-  line-height: 1.5em;
+  line-height: 1.5rem;
   margin: 1.2em 0;
   overflow: auto;
-  padding: 0 1.4em;
+  padding: 0 1.4rem;
   position: relative;
   word-wrap: normal;
 }
@@ -254,7 +254,7 @@ body {
   color: #657b83;
   display: block;
   font-family: 'Roboto Mono', Monaco, courier, monospace;
-  font-size: 0.8em;
+  font-size: 0.8rem;
   line-height: inherit;
   margin: 0 2px;
   max-width: inherit;
@@ -264,19 +264,19 @@ body {
 }
 
 .markdown-section code::after, .markdown-section code::before {
-  letter-spacing: 0.05em;
+  letter-spacing: 0.05rem;
 }
 
 code .token {
   -moz-osx-font-smoothing: initial;
   -webkit-font-smoothing: initial;
-  min-height: 1.5em;
+  min-height: 1.5rem;
 }
 
 pre::after {
   color: #ccc;
   content: attr(data-lang);
-  font-size: 0.6em;
+  font-size: 0.6rem;
   font-weight: 600;
   height: 15px;
   line-height: 15px;
diff --git a/src/themes/vue.css b/src/themes/vue.css
index 818123df..42b47de6 100644
--- a/src/themes/vue.css
+++ b/src/themes/vue.css
@@ -71,31 +71,31 @@ body {
 }
 
 .markdown-section h1 {
-  font-size: 2em;
-  margin: 0 0 1em;
+  font-size: 2rem;
+  margin: 0 0 1rem;
 }
 
 .markdown-section h2 {
-  font-size: 1.75em;
-  margin: 45px 0 0.8em;
+  font-size: 1.75rem;
+  margin: 45px 0 0.8rem;
 }
 
 .markdown-section h3 {
-  font-size: 1.5em;
-  margin: 40px 0 .6em;
+  font-size: 1.5rem;
+  margin: 40px 0 .6rem;
 }
 
 .markdown-section h4 {
-  font-size: 1.25em;
+  font-size: 1.25rem;
 }
 
 .markdown-section h5 {
-  font-size: 1em;
+  font-size: 1rem;
 }
 
 .markdown-section h6 {
   color: #777;
-  font-size: 1em;
+  font-size: 1rem;
 }
 
 .markdown-section figure,
@@ -108,13 +108,13 @@ body {
 .markdown-section p,
 .markdown-section ul,
 .markdown-section ol {
-  line-height: 1.6em;
-  word-spacing: 0.05em;
+  line-height: 1.6rem;
+  word-spacing: 0.05rem;
 }
 
 .markdown-section ul,
 .markdown-section ol {
-  padding-left: 1.5em;
+  padding-left: 1.5rem;
 }
 
 .markdown-section blockquote {
@@ -142,7 +142,7 @@ body {
   border-radius: 2px;
   color: #e96900;
   font-family: 'Roboto Mono', Monaco, courier, monospace;
-  font-size: 0.8em;
+  font-size: 0.8rem;
   margin: 0 2px;
   padding: 3px 5px;
   white-space: nowrap;
@@ -153,10 +153,10 @@ body {
   -webkit-font-smoothing: initial;
   background-color: #f8f8f8;
   font-family: 'Roboto Mono', Monaco, courier, monospace;
-  line-height: 1.5em;
+  line-height: 1.5rem;
   margin: 1.2em 0;
   overflow: auto;
-  padding: 0 1.4em;
+  padding: 0 1.4rem;
   position: relative;
   word-wrap: normal;
 }
@@ -265,7 +265,7 @@ body {
   color: #525252;
   display: block;
   font-family: 'Roboto Mono', Monaco, courier, monospace;
-  font-size: 0.8em;
+  font-size: 0.8rem;
   line-height: inherit;
   margin: 0 2px;
   max-width: inherit;
@@ -275,19 +275,19 @@ body {
 }
 
 .markdown-section code::after, .markdown-section code::before {
-  letter-spacing: 0.05em;
+  letter-spacing: 0.05rem;
 }
 
 code .token {
   -moz-osx-font-smoothing: initial;
   -webkit-font-smoothing: initial;
-  min-height: 1.5em;
+  min-height: 1.5rem;
 }
 
 pre::after {
   color: #ccc;
   content: attr(data-lang);
-  font-size: 0.6em;
+  font-size: 0.6rem;
   font-weight: 600;
   height: 15px;
   line-height: 15px;