diff --git a/assets/css/_sass/_functions.scss b/assets/css/_sass/_functions.scss
new file mode 100644
index 00000000..8e7b4737
--- /dev/null
+++ b/assets/css/_sass/_functions.scss
@@ -0,0 +1,11 @@
+@function pxToRem($pixels, $context: $browser-context) {
+  @if (unitless($pixels)) {
+    $pixels: $pixels * 1px;
+  }
+
+  @if (unitless($context)) {
+    $context: $context * 1px;
+  }
+
+  @return $pixels / $context * 1rem;
+}
diff --git a/assets/css/base.scss b/assets/css/base.scss
index b94e9e66..bc5a1465 100644
--- a/assets/css/base.scss
+++ b/assets/css/base.scss
@@ -2,6 +2,9 @@
 @import url('https://use.typekit.net/qlo3dpu.css');
 
 @import '~prism-themes/themes/prism-a11y-dark';
+@import '_sass/functions';
+
+$browser-context: 16;
 
 pre[class*='language-'] {
   font-size: 1rem;
@@ -9,7 +12,7 @@ pre[class*='language-'] {
 
 code {
   background-color: #333333;
-  border: 1px solid black;
+  border: pxToRem(1) solid black;
   color: white;
   padding: 0.15em;
   border-radius: 0.25em;
@@ -80,7 +83,7 @@ $bold: 700;
 body {
   border-top: 1rem solid red;
   font-family: $sans-serif;
-  font-size: 20px;
+  font-size: pxToRem(20);
   padding: 2rem;
   margin: 0;
 }
@@ -115,8 +118,8 @@ a {
     border-bottom: red solid 0.1rem;
   }
   &:focus {
-    outline: 3px solid $primary-color;
-    outline-offset: 5px;
+    outline: pxToRem(3) solid $primary-color;
+    outline-offset: pxToRem(5);
   }
 }
 
@@ -151,14 +154,14 @@ ul[class] {
   // margin: 13rem -7rem;
 }
 
-@media (min-width: 51rem) and (min-height: 400px) {
+@media (min-width: 51rem) and (min-height: #{pxToRem(400)}) {
   // a dramatic font size
   .title__thicc {
     font-size: 12vh;
   }
 }
 
-@media (min-width: 51rem) and (min-height: 850px) {
+@media (min-width: 51rem) and (min-height: #{pxToRem(850)}) {
   // cap the max-height of the title
   // at the same size that 12vh computes to
   // when the viewport is 850px high
@@ -167,7 +170,7 @@ ul[class] {
   }
 }
 
-@media (min-width: 800px) {
+@media (min-width: #{pxToRem(800)}) {
   .title__thicc {
     grid-column: 1 / 3;
   }
@@ -213,7 +216,7 @@ th {
   display: grid;
   grid-gap: 1rem;
 
-  @media (min-width: 800px) {
+  @media (min-width: #{pxToRem(800)}) {
     grid-template-columns: 10rem 60ch;
   }
 }
@@ -256,7 +259,7 @@ th {
     padding-bottom: 0.5em;
 
     &.subterm {
-      padding-left: 10px;
+      padding-left: pxToRem(10);
     }
 
     &:last-child {
@@ -265,7 +268,7 @@ th {
 
     &.subterm:before {
       content: '\21B3';
-      padding-right: 5px;
+      padding-right: pxToRem(5);
     }
   }
 }
@@ -340,7 +343,7 @@ th {
   }
 
   &__signal {
-    border-top: 1px solid var(--word-signal-color);
+    border-top: pxToRem(1) solid var(--word-signal-color);
     color: var(--word-signal-color);
     display: inline-block;
     font-family: $ext-sans;