diff --git a/_sass/includes/footer.scss b/_sass/includes/footer.scss
index 44b4e87..b87a73c 100644
--- a/_sass/includes/footer.scss
+++ b/_sass/includes/footer.scss
@@ -1,26 +1,26 @@
 footer.page-footer {
-  padding-top: $size-16;
-  padding-bottom: $size-32;
+  padding-top: var(--size-16);
+  padding-bottom: var(--size-32);
 
   a.social-link {
-    padding: $size-16;
-    background-color: $white;
-    fill: $black;
+    padding: var(--size-16);
+    background-color: var(--colour-white);
+    fill: var(--colour-black-graphite);
     display: inline-flex;
     justify-content: center;
     align-items: center;
     transition: all 0.2s ease-in-out;
-    margin-right: $size-16;
+    margin-right: var(--size-16);
 
     svg {
       transition: all 0.2s ease-in-out;
     }
 
     &:hover {
-      // box-shadow: 5px 5px 0 rgba($white, 0.5), 10px 10px 0 rgba($white, 0.4), 15px 15px 0 rgba($white, 0.3);
-      background-color: $black;
+      // box-shadow: 5px 5px 0 rgba(var(--colour-white), 0.5), 10px 10px 0 rgba(var(--colour-white), 0.4), 15px 15px 0 rgba(var(--colour-white), 0.3);
+      background-color: var(--colour-black-graphite);
       svg {
-        fill: $bg;
+        fill: var(--colour-bg);
       }
     }
   }
@@ -36,7 +36,7 @@ footer.page-footer {
       display: flex;
       justify-content: space-between;
       flex-wrap: wrap;
-      max-width: $size-512 + $size-128;
+      max-width: var(--size-512) + var(--size-128);
     }
   }
 }
diff --git a/_sass/includes/header.scss b/_sass/includes/header.scss
index b017eb1..c4b8bc0 100644
--- a/_sass/includes/header.scss
+++ b/_sass/includes/header.scss
@@ -2,16 +2,17 @@ header.page-header {
   .nav-link,
   .lang,
   .sub-nav-link {
-    color: $text;
+    color: var(--colour-text);
     background-color: white;
-    padding: $size-8;
+    padding: var(--size-8);
     transition: box-shadow 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
     z-index: 1;
     text-decoration: underline;
   }
 
   .lang:hover {
-    box-shadow: 5px 5px 0 rgba($white, 0.5), 10px 10px 0 rgba($white, 0.4), 15px 15px 0 rgba($white, 0.3);
+    box-shadow: 5px 5px 0 rgba(var(--colour-white), 0.5), 10px 10px 0 rgba(var(--colour-white), 0.4),
+      15px 15px 0 rgba(var(--colour-white), 0.3);
     transition: box-shadow 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
   }
 
@@ -47,8 +48,8 @@ header.page-header {
 
   nav {
     position: absolute;
-    top: $size-32;
-    right: $size-32;
+    top: var(--size-32);
+    right: var(--size-32);
     display: flex;
 
     @include touch {
@@ -56,9 +57,13 @@ header.page-header {
       top: 0;
       left: 0;
       right: initial;
-      margin-top: $size-16;
+      margin-top: var(--size-16);
       justify-content: flex-end;
     }
+
+    .nofocus:focus {
+      outline: none;
+    }
   }
 
   .lang,
@@ -72,13 +77,13 @@ header.page-header {
   }
 
   h1.logo {
-    font-family: $font-logo;
-    margin: $size-128 0;
-    // background-color: $bg;
+    font-family: var(--font-logo);
+    margin: var(--size-128) 0;
+    // background-color: var(--colour-bg);
     display: inline-block;
 
     @include touch {
-      margin: $size-128 0 $size-64 0;
+      margin: var(--size-128) 0 var(--size-64) 0;
     }
   }
 }
@@ -95,7 +100,7 @@ header.page-header {
 
     @include darkMode {
       h1 {
-        color: $white;
+        color: var(--colour-white);
       }
     }
   }
@@ -106,7 +111,7 @@ header.page-header {
   }
 
   .rf-logo {
-    margin: $size-64 0 $size-64 $size-32;
+    margin: var(--size-64) 0 var(--size-64) var(--size-32);
 
     @include touch {
       max-width: 90%;
diff --git a/_sass/includes/scrollbar.scss b/_sass/includes/scrollbar.scss
index 3e88ae2..95e99c1 100644
--- a/_sass/includes/scrollbar.scss
+++ b/_sass/includes/scrollbar.scss
@@ -10,7 +10,7 @@
 /* Handle */
 ::-webkit-scrollbar-thumb {
   // background: transparent;
-  // background-color: $black;
+  // background-color: var(--colour-black-graphite);
   // background-blend-mode: difference;
   // background-size: cover;
   // border-radius: 50px;
diff --git a/_sass/layout.scss b/_sass/layout.scss
index 6bcf72e..953e64e 100644
--- a/_sass/layout.scss
+++ b/_sass/layout.scss
@@ -1,8 +1,8 @@
 body {
-  background-color: $bg;
+  background-color: var(--colour-bg);
   background-image: url('../img/bg/bg-2.png'), url('../img/bg/bg-el-light.png');
   transition: background-color 0.5s ease-in-out;
-  background-position: $size-base $size-8, $size-8 $size-12;
+  background-position: var(--size-base) var(--size-8), var(--size-8) var(--size-12);
   background-repeat-x: no-repeat;
   background-repeat-y: repeat;
   background-attachment: fixed;
@@ -16,7 +16,7 @@ body {
   }
 
   @include darkMode {
-    background-color: $black;
+    background-color: var(--colour-black-graphite);
     // &::after {
     //   content: '';
     //   background-image: ;
@@ -46,7 +46,7 @@ body {
 
 .content {
   flex: 1 0 auto;
-  max-width: $size-512 + $size-128;
+  max-width: calc(var(--size-512) + var(--size-128));
 }
 
 footer.page-footer {
@@ -59,5 +59,5 @@ footer.page-footer {
 
 .textbox-sm {
   @include textbox;
-  padding: $size-8 $size-16;
+  padding: var(--size-8) var(--size-16);
 }
diff --git a/_sass/layouts/404.scss b/_sass/layouts/404.scss
index c40c142..6a40dac 100644
--- a/_sass/layouts/404.scss
+++ b/_sass/layouts/404.scss
@@ -10,11 +10,11 @@
   p,
   a,
   strong {
-    color: $black;
+    color: var(--colour-black-graphite);
 
     @include darkMode {
-      background-color: $white;
-      padding: $size-base;
+      background-color: var(--colour-white);
+      padding: var(--size-base);
     }
   }
 
diff --git a/_sass/layouts/default.scss b/_sass/layouts/default.scss
index 5bfac52..1bacd55 100644
--- a/_sass/layouts/default.scss
+++ b/_sass/layouts/default.scss
@@ -1,6 +1,6 @@
 .intro {
   display: block;
-  margin-bottom: $size-64;
+  margin-bottom: var(--size-64);
   p {
     @include textbox;
     margin: 0;
@@ -8,7 +8,7 @@
 }
 
 h2 {
-  margin-top: $size-32;
+  margin-top: var(--size-32);
 
   @include touch {
     margin-top: 0;
@@ -17,14 +17,14 @@ h2 {
 
 .page-content {
   @include touch {
-    @include margin-horizontal($size-32);
+    @include margin-horizontal(var(--size-32));
   }
 }
 
 .side-title {
   position: fixed;
   transition: all 0.2s ease-in-out;
-  color: $text;
+  color: var(--colour-text);
   margin: 0;
   width: 100vh;
   bottom: 0;
@@ -56,14 +56,14 @@ h2 {
   }
 
   a {
-    color: $text;
+    color: var(--colour-text);
   }
 
   @include darkMode {
-    color: $white;
+    color: var(--colour-white);
 
     a {
-      color: $white;
+      color: var(--colour-white);
     }
   }
 }
diff --git a/_sass/layouts/event.scss b/_sass/layouts/event.scss
index 124d644..07d402c 100644
--- a/_sass/layouts/event.scss
+++ b/_sass/layouts/event.scss
@@ -13,7 +13,7 @@
       small {
         display: inline;
         vertical-align: super;
-        font-size: $size-14;
+        font-size: var(--size-14);
         white-space: nowrap;
       }
     }
@@ -26,7 +26,7 @@
   }
   .details {
     small {
-      color: rgba($black, 0.6);
+      color: rgba(var(--colour-black-graphite), 0.6);
     }
 
     p,
diff --git a/_sass/layouts/participant.scss b/_sass/layouts/participant.scss
index b43ffc5..57ac173 100644
--- a/_sass/layouts/participant.scss
+++ b/_sass/layouts/participant.scss
@@ -18,7 +18,7 @@
       }
 
       img.participant-profile {
-        transform: translateY($size-24);
+        transform: translateY(var(--size-24));
         width: 100%;
         max-width: initial;
       }
diff --git a/_sass/layouts/post.scss b/_sass/layouts/post.scss
index f8cb3e3..6aee6f7 100644
--- a/_sass/layouts/post.scss
+++ b/_sass/layouts/post.scss
@@ -1,17 +1,17 @@
 .post-list {
   margin: 0;
   padding: 0;
-  margin-bottom: $size-128;
+  margin-bottom: var(--size-128);
 
   h2 {
-    margin-bottom: $size-32;
+    margin-bottom: var(--size-32);
   }
 
   .post-item {
-    margin-bottom: $size-64;
+    margin-bottom: var(--size-64);
 
     .post-header {
-      margin-bottom: $size-16;
+      margin-bottom: var(--size-16);
     }
     .post-content {
       p {
@@ -22,18 +22,18 @@
 }
 
 .news-post {
-  margin-bottom: $size-64;
+  margin-bottom: var(--size-64);
 }
 
 .post-item {
   list-style: none;
   padding: 0;
-  margin-bottom: $size-16;
+  margin-bottom: var(--size-16);
 
   .post-header {
     display: flex;
     justify-content: space-between;
-    margin-bottom: $size-32;
+    margin-bottom: var(--size-32);
     h2,
     h3,
     label {
@@ -44,7 +44,7 @@
     }
 
     a {
-      color: $black;
+      color: var(--colour-black-graphite);
       text-decoration: none;
 
       &:hover,
diff --git a/_sass/layouts/program.scss b/_sass/layouts/program.scss
index 231fc2a..6e9ee38 100644
--- a/_sass/layouts/program.scss
+++ b/_sass/layouts/program.scss
@@ -1,11 +1,11 @@
 .prog-list {
   margin: 0;
   padding: 0;
-  margin-bottom: $size-64;
+  margin-bottom: var(--size-64);
 
   li {
     .text-lg {
-      font-size: $size-16;
+      font-size: var(--size-16);
     }
 
     @include touch {
@@ -14,7 +14,7 @@
   }
 
   h2 {
-    margin-bottom: $size-32;
+    margin-bottom: var(--size-32);
   }
 
   .prog-item--format {
@@ -24,18 +24,18 @@
 }
 
 // .news-post {
-//   margin-bottom: $size-64;
+//   margin-bottom: var(--size-64);
 // }
 
 .prog-item {
   list-style: none;
   padding: 0;
-  margin-bottom: $size-16;
+  margin-bottom: var(--size-16);
 
   .prog-header {
     display: flex;
     justify-content: space-between;
-    margin-bottom: $size-32;
+    margin-bottom: var(--size-32);
     h2,
     h3,
     label {
@@ -46,7 +46,7 @@
     }
 
     a {
-      color: $black;
+      color: var(--colour-black-graphite);
       text-decoration: none;
 
       &:hover,
diff --git a/_sass/layouts/text-page.scss b/_sass/layouts/text-page.scss
index a0d1a99..45c5870 100644
--- a/_sass/layouts/text-page.scss
+++ b/_sass/layouts/text-page.scss
@@ -8,29 +8,29 @@
     @include textbox;
 
     &:last-of-type:not(ul) {
-      margin-bottom: $size-32;
+      margin-bottom: var(--size-32);
     }
 
     @include touch {
-      padding: $size-16;
+      padding: var(--size-16);
     }
   }
 
   h2,
   h3 {
     display: inline-block;
-    margin-top: $size-64;
-    margin-bottom: $size-32;
+    margin-top: var(--size-64);
+    margin-bottom: var(--size-32);
   }
 
   ul {
-    font-size: $size-14;
+    font-size: var(--size-14);
     padding-top: 0;
 
     li {
       list-style: inside;
-      @include padding-horizontal($size-12);
-      line-height: $size-24;
+      @include padding-horizontal(var(--size-12));
+      line-height: var(--size-24);
 
       &:last-of-type {
         margin-bottom: 0;
@@ -40,7 +40,7 @@
 
   sup a {
     text-decoration: none;
-    // color: $turquoise;
+    // color: var(--colour-turquoise);
   }
 
   .link-to-submit {
diff --git a/_sass/pages/home.scss b/_sass/pages/home.scss
index 4297675..75d7ce2 100644
--- a/_sass/pages/home.scss
+++ b/_sass/pages/home.scss
@@ -1,6 +1,6 @@
 #page-index {
   h2 {
-    margin-bottom: $size-32;
+    margin-bottom: var(--size-32);
   }
 
   h2,
diff --git a/_sass/pages/rf2020.scss b/_sass/pages/rf2020.scss
index 4d0c901..0b78bd9 100644
--- a/_sass/pages/rf2020.scss
+++ b/_sass/pages/rf2020.scss
@@ -5,7 +5,7 @@
       -webkit-appearance: none;
       border: none;
       box-shadow: none;
-      font-size: $size-16;
+      font-size: var(--size-16);
       cursor: pointer;
     }
   }
diff --git a/_sass/typography.scss b/_sass/typography.scss
index 7547cd6..54094b8 100644
--- a/_sass/typography.scss
+++ b/_sass/typography.scss
@@ -14,18 +14,18 @@ label,
 button,
 small,
 .separator {
-  font-family: $font;
-  color: $text;
-  margin-bottom: $size-16;
+  font-family: var(--font-body);
+  color: var(--colour-text);
+  margin-bottom: var(--size-16);
 }
 
 strong {
-  font-family: $font;
+  font-family: var(--font-body);
   font-weight: 700;
 }
 
 em {
-  font-family: $font;
+  font-family: var(--font-body);
   font-style: italic;
 }
 
@@ -42,34 +42,34 @@ h1,
 h2,
 h3,
 h4 {
-  font-family: $font-title;
+  font-family: var(--font-title);
   // font-style: italic;
 }
 
 h1,
 .h1 {
-  font-size: $size-64;
+  font-size: var(--size-64);
 }
 
 h2,
 .h2 {
-  font-size: $size-32;
+  font-size: var(--size-32);
 }
 
 h3,
 .h3 {
-  font-size: $size-24;
+  font-size: var(--size-24);
 }
 
 p,
 .text-p {
-  font-size: $size-14;
-  font-family: $font;
-  line-height: $size-32;
+  font-size: var(--size-14);
+  font-family: var(--font-body);
+  line-height: var(--size-32);
 }
 
 a {
-  // color: $black;
+  // color: var(--colour-black-graphite);
   font-weight: bold;
 
   &:hover,
@@ -79,32 +79,32 @@ a {
 }
 
 .separator {
-  max-width: $size-512 + $size-128;
+  max-width: var(--size-512) + var(--size-128);
   display: flex;
   justify-content: center;
-  @include margin-vertical($size-16);
+  @include margin-vertical(var(--size-16));
 
   .dot {
-    height: $size-8;
-    width: $size-8;
+    height: var(--size-8);
+    width: var(--size-8);
     border-radius: 100%;
-    background-color: $black;
+    background-color: var(--colour-black-graphite);
     // mix-blend-mode: exclusion;
 
     &.background-blue {
-      background-color: $highlight-darker;
+      background-color: var(--colour-highlight-darker);
     }
     &.background-white {
-      background-color: $white;
+      background-color: var(--colour-white);
     }
   }
 }
 
 a {
-  color: $turquoise;
+  color: var(--colour-turquoise);
 
   &:visited {
-    color: $highlight-darker;
+    color: var(--colour-highlight-darker);
   }
 
   &.with-url-arrow {
@@ -121,6 +121,6 @@ a {
 }
 
 ::selection {
-  background-color: $highlight;
-  color: $black;
+  background-color: var(--colour-highlight);
+  color: var(--colour-black-graphite);
 }
diff --git a/_sass/utils/layout-utils.scss b/_sass/utils/layout-utils.scss
index a399968..78bfa50 100644
--- a/_sass/utils/layout-utils.scss
+++ b/_sass/utils/layout-utils.scss
@@ -39,51 +39,51 @@
 }
 
 .margin-4-bottom {
-  margin-bottom: $size-base !important;
+  margin-bottom: var(--size-base) !important;
 }
 
 .margin-8-bottom {
-  margin-bottom: $size-8 !important;
+  margin-bottom: var(--size-8) !important;
 }
 
 .margin-16-bottom {
-  margin-bottom: $size-16 !important;
+  margin-bottom: var(--size-16) !important;
 }
 
 .margin-16-bottom-m {
   @include touch {
-    margin-bottom: $size-16 !important;
+    margin-bottom: var(--size-16) !important;
   }
 }
 
 .margin-24-bottom {
-  margin-bottom: $size-24 !important;
+  margin-bottom: var(--size-24) !important;
 }
 
 .margin-32-bottom {
-  margin-bottom: $size-32 !important;
+  margin-bottom: var(--size-32) !important;
 }
 
 .margin-64-bottom {
-  margin-bottom: $size-64 !important;
+  margin-bottom: var(--size-64) !important;
 }
 
 .margin-128-bottom {
-  margin-bottom: $size-128 !important;
+  margin-bottom: var(--size-128) !important;
 }
 
 .margin-16-left {
-  margin-left: $size-16 !important;
+  margin-left: var(--size-16) !important;
 }
 
 .margin-16-left-m {
   @include touch {
-    margin-left: $size-16 !important;
+    margin-left: var(--size-16) !important;
   }
 }
 
 .margin-16-left-d {
   @include desktop {
-    margin-left: $size-16 !important;
+    margin-left: var(--size-16) !important;
   }
 }
diff --git a/_sass/utils/typo-utils.scss b/_sass/utils/typo-utils.scss
index c7b5387..119cd7a 100644
--- a/_sass/utils/typo-utils.scss
+++ b/_sass/utils/typo-utils.scss
@@ -14,8 +14,8 @@
 }
 
 @mixin textbox {
-  background-color: $white;
-  padding: $size-16 $size-32;
+  background-color: var(--colour-white);
+  padding: var(--size-16) var(--size-32);
 }
 
 .text-right {
@@ -45,5 +45,5 @@
 }
 
 .colour-highlight {
-  color: $highlight !important;
+  color: var(--colour-highlight) !important;
 }
diff --git a/_sass/variables.scss b/_sass/variables.scss
index ad4854f..ecb0caf 100644
--- a/_sass/variables.scss
+++ b/_sass/variables.scss
@@ -1,37 +1,38 @@
-// Colours
+:root {
+  // Colours
+  --colour-black-graphite: #1d2022;
+  --colour-white: #fff;
 
-$black: #1d2022;
-$white: #fff;
-$grey-light: #ececec;
-$turquoise: #0ac2c9;
-$duckegg: #b3bbca;
-$true-blue: #037fe4;
-$highlight: $turquoise;
-$highlight-darker: #06a1a7;
+  --colour-grey-light: #ececec;
+  --colour-turquoise: #0ac2c9;
+  --colour-duckegg: #b3bbca;
 
-$bg: $grey-light;
-$text: $black;
+  --colour-true-blue: #037fe4;
+  --colour-highlight: var(--colour-turquoise, #0ac2c9);
+  --colour-highlight-darker: #06a1a7;
 
-// margin
+  -colour-bg: var(--colour-grey-light);
+  -colour-text: var(--colour-black-graphite);
 
-$size-base: 4px;
-$size-8: 8px;
-$size-12: 12px;
-$size-14: 14px;
-$size-16: 16px;
-$size-24: 24px;
-$size-32: 32px;
-$size-64: 64px;
-$size-128: 128px;
-$size-256: 256px;
-$size-512: 512px;
-$size-1028: 1028px;
+  // margin
+  --size-base: 4px;
+  --size-8: 8px;
+  --size-12: 12px;
+  --size-14: 14px;
+  --size-16: 16px;
+  --size-24: 24px;
+  --size-32: 32px;
+  --size-64: 64px;
+  --size-128: 128px;
+  --size-256: 256px;
+  --size-512: 512px;
+  --size-1028: 1028px;
 
-// Typography
-
-$font-title: 'SpaceMono', 'Courier New', Courier, monospace;
-$font-logo: 'GlyphWorld Mountain', 'SpaceMono', 'Courier New', Courier, monospace;
-$font: 'SpaceMono', 'Courier New', Courier, monospace;
+  // Typography
+  --font-title: 'SpaceMono', 'Courier New', Courier, monospace;
+  --font-logo: 'GlyphWorld Mountain', 'SpaceMono', 'Courier New', Courier, monospace;
+  --font-body: 'SpaceMono', 'Courier New', Courier, monospace;
+}
 
 // Responsive breakpoints