diff --git a/static-src/index.js b/static-src/index.js
index 10d9bbe..9e35a14 100644
--- a/static-src/index.js
+++ b/static-src/index.js
@@ -35,8 +35,8 @@ import * as ui from './ui.js'
 import * as utils from './utils.js'
 
 // Import CSS files
-import './styles.css'
-import './kx-styles.css'
+import './styles.scss'
+import './kx-styles.scss'
 
 // Add functions to window
 window.showQR = utils.showQR
diff --git a/static-src/kx-claim.js b/static-src/kx-claim.js
index 29165c3..b7b16f3 100644
--- a/static-src/kx-claim.js
+++ b/static-src/kx-claim.js
@@ -58,19 +58,26 @@ export class Claim extends HTMLElement {
 
     updateContent(value) {
         const root = this;
-        const claim = doipjs.Claim.fromJson(JSON.parse(value));
+        const claimJson = JSON.parse(value);
+        const claim = doipjs.Claim.fromJson(claimJson);
 
-        root.querySelector('.info .subtitle').innerText = claim.matches[0].about.name;
-        root.querySelector('.info .title').innerText = claim.matches[0].profile.display;
+        console.log(claimJson);
+
+        root.querySelector('.info .title').innerText = claimJson.display.name;
+        root.querySelector('.info .subtitle').innerText = claimJson.display.serviceProviderName ??
+            (claim.status < 300 ? '???' : '---');
 
         try {
             if (claim.status >= 200) {
-                root.querySelector('.icons .verificationStatus').setAttribute('data-value', claim.status < 300 ? 'success' : 'failed');
+                root.setAttribute('data-status', claim.status < 300 ? 'success' : 'failed');
+                // root.querySelector('.icons .verificationStatus').setAttribute('data-value', claim.status < 300 ? 'success' : 'failed');
             } else {
-                root.querySelector('.icons .verificationStatus').setAttribute('data-value', 'running');
+                root.setAttribute('data-status', 'running');
+                // root.querySelector('.icons .verificationStatus').setAttribute('data-value', 'running');
             }
         } catch (error) {
-            root.querySelector('.icons .verificationStatus').setAttribute('data-value', 'failed');
+            root.setAttribute('data-status', 'failed');
+            // root.querySelector('.icons .verificationStatus').setAttribute('data-value', 'failed');
         }
 
         const elContent = root.querySelector('.content');
diff --git a/static-src/kx-styles.css b/static-src/kx-styles.css
deleted file mode 100644
index c8fb7f3..0000000
--- a/static-src/kx-styles.css
+++ /dev/null
@@ -1,264 +0,0 @@
-/*
-Copyright (C) 2021 Yarmo Mackenbach
-
-This program is free software: you can redistribute it and/or modify it under
-the terms of the GNU Affero General Public License as published by the Free
-Software Foundation, either version 3 of the License, or (at your option)
-any later version.
-
-This program is distributed in the hope that it will be useful, but WITHOUT
-ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
-FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
-details.
-
-You should have received a copy of the GNU Affero General Public License along
-with this program. If not, see <https://www.gnu.org/licenses/>.
-
-Also add information on how to contact you by electronic and paper mail.
-
-If your software can interact with users remotely through a computer network,
-you should also make sure that it provides a way for users to get its source.
-For example, if your program is a web application, its interface could display
-a "Source" link that leads users to an archive of the code. There are many
-ways you could offer source, and different solutions will be better for different
-programs; see section 13 for the specific requirements.
-
-You should also get your employer (if you work as a programmer) or school,
-if any, to sign a "copyright disclaimer" for the program, if necessary. For
-more information on this, and how to apply and follow the GNU AGPL, see <https://www.gnu.org/licenses/>.
-*/
-kx-claim {
-  display: block;
-  margin: 12px 0;
-}
-
-/* KX-ITEM */
-.kx-item details {
-  width: 100%;
-  border-radius: 8px;
-}
-.kx-item details p {
-  margin: 0;
-  word-break: break-word;
-  font-size: 1rem;
-}
-.kx-item details a {
-  color: var(--link-color);
-}
-.kx-item details hr {
-  border: none;
-  border-top: 2px solid var(--claim-background-color);
-}
-.kx-item details .content {
-  padding: 12px;
-  border: solid 3px var(--claim-background-color);
-  border-top: 0px;
-  border-radius: 0px 0px 8px 8px;
-}
-.kx-item details summary {
-  display: flex;
-  align-items: center;
-  padding: 8px 12px;
-  background-color: var(--claim-background-color);
-  border: solid 3px var(--claim-background-color);
-  border-radius: 8px;
-  list-style: none;
-  cursor: pointer;
-}
-.kx-item details summary::-webkit-details-marker {
-  display: none;
-}
-.kx-item details summary:hover, summary:focus {
-  border-color: var(--claim-border-accent-color);
-}
-details[open] summary {
-  border-radius: 8px 8px 0px 0px;
-}
-.kx-item details summary .info {
-  flex: 1;
-}
-.kx-item details summary .info .title {
-  font-size: 1.1em;
-}
-.kx-item details summary .claim__description p {
-  font-size: 1.4rem;
-  line-height: 2rem;
-}
-.kx-item details summary .claim__links p, p.subtle-links {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  font-size: 1rem;
-  color: var(--link-subtle-color);
-}
-.kx-item details summary .claim__links a, summary .claim__links span, p.subtle-links a {
-  font-size: 1rem;
-  margin: 0 10px 0 0;
-  color: var(--link-subtle-color);
-}
-.kx-item details summary .subtitle {
-  color: var(--claim-title-text-color);
-}
-.kx-item details summary .verificationStatus {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 48px;
-  height: 48px;
-  border-radius: 100%;
-  color: #fff;
-  font-size: 2rem;
-  user-select: none;
-}
-.kx-item details summary .verificationStatus::after {
-  position: absolute;
-  display: flex;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  align-items: center;
-  justify-content: center;
-}
-.kx-item details summary .verificationStatus .inProgress {
-  opacity: 0;
-  transition: opacity 0.4s ease;
-  pointer-events: none;
-}
-.kx-item details summary .verificationStatus[data-value="success"] {
-  content: "v";
-  background-color: var(--success-color);
-}
-.kx-item details summary .verificationStatus[data-value="success"]::after {
-  content: "✔";
-}
-.kx-item details summary .verificationStatus[data-value="failed"] {
-  background-color: var(--failure-color);
-}
-.kx-item details summary .verificationStatus[data-value="failed"]::after {
-  content: "✕";
-}
-.kx-item details summary .verificationStatus[data-value="running"] .inProgress {
-  opacity: 1;
-}
-
-.kx-item details .subsection {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-.kx-item details .subsection > img {
-  width: 24px;
-  height: 24px;
-  opacity: 0.4;
-}
-@media (prefers-color-scheme: dark) {
-  .kx-item details .subsection > img {
-    filter: invert(1);
-  }
-}
-
-.kx-item details .inProgress {
-  font-size: 10px;
-  margin: 50px auto;
-  text-indent: -9999em;
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  background: var(--loader-color);
-  background: -moz-linear-gradient(left, var(--loader-color) 10%, rgba(255, 255, 255, 0) 42%);
-  background: -webkit-linear-gradient(left, var(--loader-color) 10%, rgba(255, 255, 255, 0) 42%);
-  background: -o-linear-gradient(left, var(--loader-color) 10%, rgba(255, 255, 255, 0) 42%);
-  background: -ms-linear-gradient(left, var(--loader-color) 10%, rgba(255, 255, 255, 0) 42%);
-  background: linear-gradient(to right, var(--loader-color) 10%, rgba(255, 255, 255, 0) 42%);
-  position: relative;
-  -webkit-animation: load3 1.4s infinite linear;
-  animation: load3 1.4s infinite linear;
-  -webkit-transform: translateZ(0);
-  -ms-transform: translateZ(0);
-  transform: translateZ(0);
-}
-.kx-item details .inProgress:before {
-  width: 50%;
-  height: 50%;
-  background: var(--loader-color);
-  border-radius: 100% 0 0 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  content: '';
-}
-.kx-item details .inProgress:after {
-  background: var(--claim-background-color);
-  width: 65%;
-  height: 65%;
-  border-radius: 50%;
-  content: '';
-  margin: auto;
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-}
-.kx-item details button {
-  padding: 0.4rem 0.8rem;
-  margin-right: 8px;
-  text-decoration: none;
-  text-transform: uppercase;
-  color: var(--button-text-color);
-  background-color: var(--button-background-color);
-  border: solid 2px var(--button-border-color);
-  border-radius: 4px;
-  cursor: pointer;
-}
-.kx-item details button:hover {
-  background-color: var(--button-hover-background-color);
-  border-color: var(--button-hover-border-color);
-  color: var(--button-hover-text-color);
-}
-
-@media screen and (max-width: 640px) {
-  .kx-item details summary .claim__description p {
-    font-size: 1.2rem;
-  }
-  .kx-item details summary .claim__links a, p.subtle-links a {
-    font-size: 0.9rem;
-  }
-}
-@media screen and (max-width: 480px) {
-  summary .claim__description p {
-    font-size: 1rem;
-  }
-  .kx-item details summary .verificationStatus {
-    width: 36px;
-    height: 36px;
-    font-size: 1.6rem;
-  }
-  .kx-item details .inProgress {
-    width: 36px;
-    height: 36px;
-  }
-}
-
-@-webkit-keyframes load3 {
-  0% {
-      -webkit-transform: rotate(0deg);
-      transform: rotate(0deg);
-  }
-  100% {
-      -webkit-transform: rotate(360deg);
-      transform: rotate(360deg);
-  }
-}
-@keyframes load3 {
-  0% {
-      -webkit-transform: rotate(0deg);
-      transform: rotate(0deg);
-  }
-  100% {
-      -webkit-transform: rotate(360deg);
-      transform: rotate(360deg);
-  }
-}
diff --git a/static-src/kx-styles.scss b/static-src/kx-styles.scss
new file mode 100644
index 0000000..52db260
--- /dev/null
+++ b/static-src/kx-styles.scss
@@ -0,0 +1,269 @@
+/*
+Copyright (C) 2021 Yarmo Mackenbach
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU Affero General Public License as published by the Free
+Software Foundation, either version 3 of the License, or (at your option)
+any later version.
+
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+details.
+
+You should have received a copy of the GNU Affero General Public License along
+with this program. If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+If your software can interact with users remotely through a computer network,
+you should also make sure that it provides a way for users to get its source.
+For example, if your program is a web application, its interface could display
+a "Source" link that leads users to an archive of the code. There are many
+ways you could offer source, and different solutions will be better for different
+programs; see section 13 for the specific requirements.
+
+You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary. For
+more information on this, and how to apply and follow the GNU AGPL, see <https://www.gnu.org/licenses/>.
+*/
+kx-claim {
+    padding: 2px 0;
+}
+
+.kx-item {
+    display: block;
+    font-size: 0.9rem;
+    margin-left: -4px;
+
+    details {
+        position: relative;
+        width: 100%;
+        border-radius: 4px;
+        z-index: 0;
+
+        &[open] {
+            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+            z-index: 100;
+        }
+
+        p {
+            margin: 0;
+            word-break: break-word;
+            font-size: 1em;
+        }
+
+        a {
+            color: var(--link-color);
+        }
+
+        hr {
+            border: none;
+            border-top: 2px solid var(--background-color);
+        }
+
+        .content {
+            font-size: 0.9em;
+            padding: 12px;
+            background-color: var(--background-color);
+            border-top: 0px;
+            border-radius: 0px 0px 4px 4px;
+        }
+
+        &[open] summary {
+            border-radius: 4px 4px 0px 0px;
+            background-color: var(--header-background-color) !important;
+        }
+
+        summary {
+            display: flex;
+            align-items: center;
+            padding: 2px 4px;
+            border-radius: 4px;
+            list-style: none;
+            cursor: pointer;
+
+            &::-webkit-details-marker {
+                display: none;
+            }
+
+            &:hover,
+            &:focus {
+                background-color: var(--header-background-color);
+            }
+
+            .info {
+                flex: 1;
+            }
+
+            .info .title {
+                color: var(--text-color);
+            }
+
+            .claim__links {
+
+                p {
+                    display: flex;
+                    align-items: center;
+                    flex-wrap: wrap;
+                    font-size: 1em;
+                    color: var(--link-color-subtle);
+                }
+
+                .a,
+                span {
+                    font-size: 1em;
+                    margin: 0 10px 0 0;
+                    color: var(--link-color-subtle);
+                }
+            }
+
+            .subtitle-wrapper {
+                color: var(--text-color-subtle);
+            }
+        }
+
+        .subsection {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .subsection>img {
+            width: 20px;
+            height: 20px;
+            opacity: 0.4;
+        }
+
+        @media (prefers-color-scheme: dark) {
+            .subsection>img {
+                filter: invert(1);
+            }
+        }
+    }
+
+    .verificationStatus {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        border-radius: 100%;
+        color: #fff;
+        font-size: 1.4em;
+        user-select: none;
+
+        &::after {
+            position: absolute;
+            display: flex;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .inProgress,
+        .success,
+        .failure {
+            position: absolute;
+            top: 0;
+            left: 0;
+            opacity: 0;
+            pointer-events: none;
+        }
+
+        .inProgress {
+            color: var(--loader-color);
+
+            svg {
+                animation: 1s linear 0s infinite rot360;
+            }
+        }
+
+        .success {
+            color: var(--success-color);
+        }
+
+        .failure {
+            color: var(--failure-color);
+        }
+    }
+
+    button {
+        padding: 0.4rem 0.8em;
+        margin-right: 8px;
+        text-decoration: none;
+        text-transform: uppercase;
+        color: var(--button-text-color);
+        background-color: var(--button-background-color);
+        border: solid 2px var(--button-border-color);
+        border-radius: 4px;
+        cursor: pointer;
+    }
+
+    button:hover {
+        background-color: var(--button-hover-background-color);
+        border-color: var(--button-hover-border-color);
+        color: var(--button-hover-text-color);
+    }
+
+    &[data-status="running"] {
+        .title {
+            color: var(--text-color-subtle) !important;
+        }
+        .inProgress {
+            opacity: 1 !important;
+        }
+    }
+
+    &[data-status="success"] {
+        .title {
+            color: var(--primary-color) !important;
+            font-weight: bold;
+        }
+        .success {
+            opacity: 1 !important;
+        }
+    }
+
+    &[data-status="failed"] {
+        .title {
+            color: var(--text-color-subtle) !important;
+        }
+        .failure {
+            opacity: 1 !important;
+        }
+    }
+
+    &[data-status="success"] .verificationStatus>div,
+    &[data-status="failed"] .verificationStatus>div {
+        transition: opacity 0.4s ease !important;
+    }
+
+    @-webkit-keyframes rot360 {
+        0% {
+            -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+        }
+
+        100% {
+            -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+        }
+    }
+
+    @keyframes rot360 {
+        0% {
+            -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+        }
+
+        100% {
+            -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+        }
+    }
+}
\ No newline at end of file
diff --git a/static-src/styles.css b/static-src/styles.css
deleted file mode 100644
index 5e9b3cd..0000000
--- a/static-src/styles.css
+++ /dev/null
@@ -1,656 +0,0 @@
-/*
-Copyright (C) 2021 Yarmo Mackenbach
-
-This program is free software: you can redistribute it and/or modify it under
-the terms of the GNU Affero General Public License as published by the Free
-Software Foundation, either version 3 of the License, or (at your option)
-any later version.
-
-This program is distributed in the hope that it will be useful, but WITHOUT
-ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
-FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
-details.
-
-You should have received a copy of the GNU Affero General Public License along
-with this program. If not, see <https://www.gnu.org/licenses/>.
-
-Also add information on how to contact you by electronic and paper mail.
-
-If your software can interact with users remotely through a computer network,
-you should also make sure that it provides a way for users to get its source.
-For example, if your program is a web application, its interface could display
-a "Source" link that leads users to an archive of the code. There are many
-ways you could offer source, and different solutions will be better for different
-programs; see section 13 for the specific requirements.
-
-You should also get your employer (if you work as a programmer) or school,
-if any, to sign a "copyright disclaimer" for the program, if necessary. For
-more information on this, and how to apply and follow the GNU AGPL, see <https://www.gnu.org/licenses/>.
-*/
-@import '../node_modules/fork-awesome/css/fork-awesome.css';
-@import '../node_modules/dialog-polyfill/dist/dialog-polyfill.css';
-
-:root {
-  --white: hsl(0, 0%, 100%);
-  --black: hsl(0, 0%, 0%);
-  --grey-100: hsl(0, 0%, 90%);
-  --grey-200: hsl(0, 0%, 80%);
-  --grey-300: hsl(0, 0%, 70%);
-  --grey-400: hsl(0, 0%, 60%);
-  --grey-500: hsl(0, 0%, 50%);
-  --grey-600: hsl(0, 0%, 40%);
-  --grey-700: hsl(0, 0%, 30%);
-  --grey-900: hsl(0, 0%, 10%);
-  --green-300: hsl(110, 45%, 70%);
-  --green-400: hsl(110, 45%, 60%);
-  --green-600: hsl(110, 45%, 40%);
-  --red-400: hsl(10, 60%, 60%);
-  --blue-500: rgb(67, 176, 234);
-  --blue-700: hsl(201, 90%, 30%);
-  --purple-50: rgb(249, 248, 251);
-  --purple-100: rgb(238, 236, 248);
-  --purple-200: hsl(250, 48%, 90%);
-  --purple-300: hsl(250, 48%, 85%);
-  --purple-400: hsl(250, 48%, 70%);
-  --purple-500: hsl(250, 48%, 65%);
-  --purple-600: hsl(250, 48%, 60%);
-  --purple-700: hsl(250, 48%, 55%);
-  --purple-900: hsl(250, 38%, 45%);
-  --yellow-100: hsl(56, 100%, 95%);
-  --yellow-200: hsl(56, 100%, 90%);
-  --yellow-500: hsl(56, 100%, 65%);
-
-  --loader-color: var(--purple-400);
-  --success-color: var(--green-600);
-  --failure-color: var(--red-400);
-  
-  --text-color: var(--grey-900);
-  --h1-color: var(--purple-700);
-  --h2-color: var(--purple-700);
-  --h2-small-color: var(--purple-600);
-  --h3-color: var(--grey-700);
-  --h3-small-color: var(--purple-400);
-  --h4-color: var(--grey-600);
-  --h4-small-color: var(--purple-400);
-  --link-color: var(--blue-700);
-  --link-subtle-color: var(--grey-700);
-  --nav-link-color: var(--purple-700);
-
-  --button-text-color: var(--text-color);
-  --button-border-color: var(--purple-500);
-  --button-background-color: var(--white);
-  --button-hover-text-color: var(--white);
-  --button-hover-border-color: var(--purple-500);
-  --button-hover-background-color: var(--purple-500);
-
-  --body-background-color: var(--white);
-  --footer-background-color: var(--purple-900);
-  --footer-text-color: var(--purple-200);
-  --card-background-color: var(--purple-50);
-  --card-border-color: var(--purple-200);
-  --claim-background-color: var(--purple-100);
-  --claim-border-accent-color: var(--purple-400);
-  --claim-title-text-color: var(--purple-700);
-  --input-focus-background-color: azure;
-  --focus-outline-color: lightskyblue;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --text-color: var(--grey-100);
-    --h1-color: var(--purple-700);
-    --h2-color: var(--purple-300);
-    --h2-small-color: var(--purple-600);
-    --h3-color: var(--grey-300);
-    --h3-small-color: var(--purple-400);
-    --h4-color: var(--grey-300);
-    --h4-small-color: var(--purple-6400);
-    --link-color: var(--blue-500);
-    --link-subtle-color: var(--grey-700);
-    --nav-link-color: var(--purple-100);
-
-    --loader-color: var(--purple-600);
-    --success-color: var(--green-600);
-    --failure-color: var(--red-400);
-    
-    --button-text-color: var(--white);
-    --button-border-color: var(--purple-700);
-    --button-background-color: var(--purple-900);
-    --button-hover-text-color: var(--white);
-    --button-hover-border-color: var(--purple-700);
-    --button-hover-background-color: var(--purple-700);
-
-    --body-background-color: #121212;
-    --footer-background-color: #191720;
-    --footer-text-color: var(--purple-200);
-    --card-background-color: #191720;
-    --card-border-color: #26203a;
-    --claim-background-color: #26203a;
-    --claim-border-accent-color: var(--purple-400);
-    --claim-title-text-color: var(--purple-300);
-    --input-focus-background-color: azure;
-    --focus-outline-color: lightskyblue;
-  }
-}
-
-* {
-  box-sizing: border-box;
-}
-:focus {
-  outline: none;
-  box-shadow: 0 0 0 3px var(--focus-outline-color);
-}
-input:focus, textarea:focus {
-  background: var(--input-focus-background-color);
-}
-input[type="radio"]:focus + label {
-  box-shadow: 0 0 0 3px var(--focus-outline-color);
-  background: var(--input-focus-background-color) !important;
-  color: var(--text-color) !important;
-}
-body {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-  margin: 0;
-  padding: 1.6rem 0 0;
-  line-height: 1.4rem;
-  font-family: sans-serif;
-  color: var(--text-color);
-  background-color: var(--body-background-color);
-}
-
-/* HELPERS */
-.spacer {
-  flex: 1;
-}
-.no-margin {
-  margin: 0 !important;
-}
-.full-width {
-  display: block;
-  width: 100% !important;
-}
-.half-width {
-  display: block;
-  width: 50% !important;
-}
-.select-all {
-  user-select: all;
-}
-
-/* LAYOUT */
-header {
-  margin: 0 1.6rem 1.6rem;
-}
-header nav {
-  flex: 1;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-}
-header nav a.logo {
-  width: 64px;
-  height: 64px;
-  font-size: 1.6rem;
-  text-transform: uppercase;
-  text-decoration: none;
-  color: var(--nav-link-color);
-}
-header nav a.logo img {
-  width: 100%;
-}
-nav a.text {
-  /* font-size: 0.9em; */
-  margin: 0;
-  padding: 0.5em 1em;
-  text-transform: uppercase;
-  text-decoration: none;
-  color: var(--nav-link-color);
-  border-radius: 4px;
-}
-nav a.text:hover, nav a.text:active {
-  color: #fff;
-  background-color: var(--purple-500);
-}
-main {
-  flex: 1;
-  margin: 0 1.6rem;
-}
-footer {
-  margin: 4.8rem 0 0;
-  padding: 0 1.6rem 1.6rem;
-  background-color: var(--footer-background-color);
-  color: var(--footer-text-color);
-}
-
-.container {
-  width: 100%;
-  max-width: 720px;
-  margin: 0 auto;
-}
-section.profile p, .demo p {
-  font-size: 1.2rem;
-}
-.demo {
-  margin: 4.8rem auto;
-}
-
-.card {
-  margin: 0 0 1.6rem;
-  padding: 0 1.2rem;
-  background-color: #fff;
-  background-color: var(--card-background-color);
-  border: 2px solid var(--card-border-color);
-  border-radius: 4px;
-}
-.card.card--transparent {
-  padding-left: 0;
-  padding-right: 0;
-  background-color: transparent;
-  border: 0;
-}
-.card--profileHeader {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 24px;
-}
-.card--profileHeader p, .card--profileHeader small {
-  margin: 0;
-}
-.card--small-profile {
-  display: flex;
-  flex-direction: column;
-  text-align: center;
-}
-.card--small-profile-dummy {
-  opacity: 0.5;
-  border: 0;
-}
-.card--small-profile .name {
-  font-size: 1.4em;
-}
-.card--small-profile p {
-  margin-top: 0;
-}
-.card--small-profile p span.fingerprint {
-  display: inline-block;
-  width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 0.8rem;
-}
-#profileName {
-  font-size: 1.6rem;
-  color: var(--text-color);
-}
-#profileURLFingerprint {
-  font-size: 1rem;
-  margin: 0 0 1.2rem;
-}
-
-.hcards {
-  display: grid;
-  grid-gap: 1.2rem;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  margin-bottom: 1.6rem;
-}
-.hcards .card {
-  margin: 0;
-}
-.hcards.hcards--max-2 {
-  grid-template-columns: repeat(auto-fit, minmax(256px, 1fr));
-}
-.hcards--col-1-2, .hcards--col-2-1 {
-  grid-template-columns: repeat(auto-fit, minmax(256px, 1fr));
-}
-.hcards--col-1-2 .card, .hcards--col-2-1 .card {
-  grid-column: 1 / 2;
-}
-@media screen and (min-width: 1024px) {
-  .hcards--max-3 {
-    grid-template-columns: 1fr 1fr 1fr;
-  }
-  .hcards--max-2 {
-    grid-template-columns: 1fr 1fr;
-  }
-  .hcards--col-1-2, .hcards--col-2-1 {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}
-@media screen and (min-width: 720px) {
-  .hcards--col-2-1 .card:nth-of-type(1) {
-    grid-column: 1 / -2;
-  }
-  .hcards--col-2-1 .card:nth-of-type(2) {
-    grid-column: -2 / -1;
-  }
-  .hcards--col-1-2 .card:nth-of-type(1) {
-    grid-column: 1 / 2;
-  }
-  .hcards--col-1-2 .card:nth-of-type(2) {
-    grid-column: 2 / -1;
-  }
-}
-
-.warning {
-  padding: calc(0.8rem - 2px) 0.8rem;
-  background-color: var(--yellow-200);
-  border: solid 2px var(--yellow-500);
-}
-.warning p:first-of-type {
-  margin-top: 0;
-}
-.warning p:last-of-type {
-  margin-bottom: 0;
-}
-
-#profileAvatar {
-  display: inline-block;
-  min-width: 96px;
-  max-width: 128px;
-  line-height: 0;
-  text-align: center;
-  border-radius: 50%;
-}
-
-/* TYPOGRAPHY */
-h1 {
-  font-size: 1.6em;
-  margin: 3.2rem 0 1.6rem;
-  font-weight: normal;
-  color: var(--h1-color);
-  cursor: default;
-}
-h2 {
-  font-size: 1.4em;
-  margin: 3.2rem 0 1.6rem;
-  font-weight: normal;
-  color: var(--h2-color);
-  cursor: default;
-}
-h2 small {
-  margin-left: 0.8rem;
-  padding: 3px 6px;
-  background-color: var(--h2-small-color);
-  color: #fff;
-  border-radius: 4px;
-}
-h3 {
-  margin: 1.6rem 0;
-  font-size: 1.3em;
-  line-height: 1.6rem;
-  color: var(--h3-color);
-  font-weight: normal;
-  /* text-align: center; */
-  cursor: default;
-}
-h3 small {
-  margin-left: 0.8rem;
-  padding: 3px 6px;
-  background-color: var(--h3-small-color);
-  color: #fff;
-  border-radius: 4px;
-}
-h4 {
-  margin: 1.6rem 0;
-  font-size: 1em;
-  line-height: 1.6rem;
-  color: var(--h4-color);
-  /* color: var(--purple-700); */
-  font-weight: bold;
-  cursor: default;
-}
-h4 small {
-  margin-left: 0.8rem;
-  padding: 3px 6px;
-  background-color: var(--h4-small-color);
-  color: #fff;
-  border-radius: 4px;
-}
-p {
-  margin: 1.6rem 0;
-}
-p.warning {
-  padding: 8px;
-  background-color: #fffadc;
-  border: solid 1px #ffeea8;
-}
-a {
-  color: var(--link-color);
-}
-ul {
-  padding-left: 1em;
-  list-style: '- ';
-}
-main h1:first-of-type {
-  margin-top: 1.6rem;
-}
-footer h1 {
-  margin-bottom: 0.8rem;
-  color: var(--purple-200);
-  font-size: 1.2rem;
-  font-weight: bold;
-}
-footer a {
-  display: inline-block;
-  color: var(--purple-100);
-  height: 32px;
-}
-
-code {
-  padding: 2px 4px;
-  background-color: var(--purple-100);
-  border: 1px solid var(--purple-500);
-}
-pre {
-  padding: 8px 12px;
-  background-color: var(--purple-100);
-  border: 1px solid var(--purple-500);
-  overflow-x: auto;
-  line-height: 1.2rem;
-  font-size: 1rem;
-}
-pre code {
-  padding: 0;
-  background-color: 0px;
-  border: 0px;
-}
-
-#search {
-  margin-top: 96px;
-  margin-bottom: 128px;
-}
-#qr {
-  display: block;
-  width: 100% !important;
-  max-width: 256px !important;
-  height: auto !important;
-  margin: 0 auto 16px;
-}
-
-/* FORM ELEMENTS */
-.form-wrapper {
-  align-items: center;
-  padding-top: 1.4rem;
-  padding-bottom: 1.6rem;
-  margin-bottom: 48px;
-}
-.form-wrapper *:last-child {
-  margin-bottom: 0;
-}
-.form-wrapper form {
-  display: flex;
-  flex-direction: column;
-  margin: 0;
-}
-.form-wrapper h2 {
-  margin-top: 0;
-}
-form input[type="text"], form input[type="search"] {
-  margin: 8px 0;
-  padding: 4px;
-  border: 1px solid #999;
-  border-radius: 3px;
-  font-size: 0.9rem;
-}
-form textarea {
-  width: 100%;
-  height: 128px;
-  margin: 8px 0;
-  resize: vertical;
-  font-size: 0.9rem;
-  border: 1px solid #999;
-}
-.button-wrapper {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin: 8px 0;
-}
-.radio-wrapper {
-  display: flex;
-  flex-wrap: wrap;
-  margin: 8px 0;
-}
-.radio-wrapper input[type="radio"] {
-  position: absolute;
-  opacity: 0;
-  z-index: -1;
-}
-.radio-wrapper input[type="radio"] + label {
-  margin: 0;
-  padding: 2px 8px;
-  background-color: #fff;
-  border: solid var(--purple-400);
-  border-width: 2px 1px;
-  cursor: pointer;
-}
-.radio-wrapper input[type="radio"]:first-of-type + label {
-  border-radius: 4px 0 0 4px;
-  border-left-width: 2px;
-}
-.radio-wrapper input[type="radio"]:last-of-type + label {
-  border-radius: 0 4px 4px 0;
-  border-right-width: 2px;
-}
-.radio-wrapper input[type="radio"]:focus + label {
-  z-index: 1;
-}
-.radio-wrapper input[type="radio"] + label:hover {
-  background-color: var(--purple-100);
-  border-color: var(--purple-500);
-}
-.radio-wrapper input[type="radio"]:checked + label {
-  color: #fff;
-  background-color: var(--purple-600);
-  border-color: var(--purple-600);
-}
-
-input[type="button"], input[type="submit"], button, a.button {
-  display: inline-block;
-  min-height: 36px;
-  margin: 8px 0;
-  padding: 4px 8px;
-  font-family: sans-serif;
-  font-size: 0.9rem;
-  text-decoration: none;
-  text-transform: uppercase;
-  color: var(--button-text-color);
-  background-color: var(--button-background-color);
-  border: solid 2px var(--button-border-color);
-  border-radius: 4px;
-  cursor: pointer;
-}
-input[type="button"]:focus, input[type="submit"]:focus, button:focus, a.button:focus {
-  background-color: var(--input-focus-background-color);
-}
-input[type="button"]:hover, input[type="submit"]:hover, button:hover, a.button:hover {
-  background-color: var(--button-hover-background-color);
-  border-color: var(--button-hover-border-color);
-  color: var(--button-hover-text-color);
-}
-a.button i {
-  font-size: 1.4em;
-}
-a.button--donate {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  margin-right: 12px;
-  padding: 8px 16px;
-  font-size: 0.95rem;
-  border: 0;
-}
-a.button--donate svg {
-  width: 24px;
-  height: 24px;
-  fill: var(--text-color);
-}
-a.button--donate.button--opencollective {
-  color: #fff;
-  background-color: #0c2d66;
-}
-a.button--donate.button--opencollective svg {
-  fill: #fff;
-}
-a.button--donate.button--opencollective:hover {
-  color: #fff;
-  background-color: #144aa9;
-}
-a.button--donate.button--liberapay {
-  color: #333;
-  background-color: #ffee16;
-}
-a.button--donate.button--liberapay svg {
-  fill: #333;
-}
-a.button--donate.button--liberapay:hover {
-  color: #333;
-  background-color: #fff463;
-}
-a.button--donate.button--kofi {
-  color: #333;
-  background-color: #1ac0ff;
-}
-a.button--donate.button--kofi svg {
-  fill: #333;
-}
-a.button--donate.button--kofi:hover {
-  color: #333;
-  background-color: #66d4ff;
-}
-button.inline {
-  min-height: auto;
-  margin: 0;
-  padding: 2px 8px;
-}
-
-/* DIALOGS */
-dialog {
-  width: 100% !important;
-  max-width: 800px !important;
-  padding: 0 !important;
-  word-wrap: anywhere;
-}
-dialog > div {
-  padding: 1em;
-}
-dialog form[method="Dialog"] {
-  margin: 1em 0 0 !important;
-}
-dialog form[method="Dialog"] input {
-  width: auto;
-}
-dialog p {
-  font-size: 1rem !important;
-  margin: 1rem 0;
-}
-dialog p:first-of-type {
-  margin-top: 0;
-}
diff --git a/static-src/styles.scss b/static-src/styles.scss
new file mode 100644
index 0000000..c09b638
--- /dev/null
+++ b/static-src/styles.scss
@@ -0,0 +1,100 @@
+/*
+Copyright (C) 2021 Yarmo Mackenbach
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU Affero General Public License as published by the Free
+Software Foundation, either version 3 of the License, or (at your option)
+any later version.
+
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+details.
+
+You should have received a copy of the GNU Affero General Public License along
+with this program. If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+If your software can interact with users remotely through a computer network,
+you should also make sure that it provides a way for users to get its source.
+For example, if your program is a web application, its interface could display
+a "Source" link that leads users to an archive of the code. There are many
+ways you could offer source, and different solutions will be better for different
+programs; see section 13 for the specific requirements.
+
+You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary. For
+more information on this, and how to apply and follow the GNU AGPL, see <https://www.gnu.org/licenses/>.
+*/
+@use './styles/vars.scss';
+@use './styles/layout.scss';
+@use './styles/typography.scss';
+@use './styles/forms.scss';
+
+@import '../node_modules/fork-awesome/css/fork-awesome.css';
+@import '../node_modules/dialog-polyfill/dist/dialog-polyfill.css';
+
+* {
+    box-sizing: border-box;
+}
+
+/* HELPERS */
+.spacer {
+    flex: 1;
+}
+
+.no-margin {
+    margin: 0 !important;
+}
+
+.full-width {
+    display: block;
+    width: 100% !important;
+}
+
+.half-width {
+    display: block;
+    width: 50% !important;
+}
+
+.select-all {
+    user-select: all;
+}
+
+#qr {
+    display: block;
+    width: 100% !important;
+    max-width: 256px !important;
+    height: auto !important;
+    margin: 0 auto 16px;
+}
+
+/* DIALOGS */
+dialog {
+    width: 100% !important;
+    max-width: 800px !important;
+    padding: 0 !important;
+    word-wrap: anywhere;
+}
+
+dialog>div {
+    padding: 1em;
+}
+
+dialog form[method="Dialog"] {
+    margin: 1em 0 0 !important;
+}
+
+dialog form[method="Dialog"] input {
+    width: auto;
+}
+
+dialog p {
+    font-size: 1rem !important;
+    margin: 1rem 0;
+}
+
+dialog p:first-of-type {
+    margin-top: 0;
+}
\ No newline at end of file
diff --git a/static-src/styles/forms.scss b/static-src/styles/forms.scss
new file mode 100644
index 0000000..b083e38
--- /dev/null
+++ b/static-src/styles/forms.scss
@@ -0,0 +1,152 @@
+/*
+Copyright (C) 2023 Yarmo Mackenbach
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU Affero General Public License as published by the Free
+Software Foundation, either version 3 of the License, or (at your option)
+any later version.
+
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+details.
+
+You should have received a copy of the GNU Affero General Public License along
+with this program. If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+If your software can interact with users remotely through a computer network,
+you should also make sure that it provides a way for users to get its source.
+For example, if your program is a web application, its interface could display
+a "Source" link that leads users to an archive of the code. There are many
+ways you could offer source, and different solutions will be better for different
+programs; see section 13 for the specific requirements.
+
+You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary. For
+more information on this, and how to apply and follow the GNU AGPL, see <https://www.gnu.org/licenses/>.
+*/
+.form-wrapper {
+    align-items: center;
+    padding-top: 1.4rem;
+    padding-bottom: 1.6rem;
+    margin-bottom: 48px;
+}
+
+.form-wrapper *:last-child {
+    margin-bottom: 0;
+}
+
+.form-wrapper form {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+}
+
+.form-wrapper h2 {
+    margin-top: 0;
+}
+
+form input[type="text"],
+form input[type="search"] {
+    margin: 8px 0;
+    padding: 4px;
+    border: 1px solid var(--input-border-color);
+    border-radius: 3px;
+    font-size: 0.9rem;
+}
+
+form textarea {
+    width: 100%;
+    height: 128px;
+    margin: 8px 0;
+    resize: vertical;
+    font-size: 0.9rem;
+    border: 1px solid var(--input-border-color);
+}
+
+.button-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin: 8px 0;
+}
+
+input {
+    color: var(--input-text-color);
+    background-color: var(--input-background-color);
+    border: solid 1px var(--input-border-color);
+    border-radius: 4px;
+
+    &:hover {
+        background-color: var(--input-background-color-hover);
+        border-color: var(--input-border-color-hover);
+        color: var(--input-text-color-hover);
+    }
+}
+
+input[type="button"],
+input[type="submit"],
+button,
+a.button {
+    display: inline-block;
+    margin: 8px 0;
+    padding: 4px 8px;
+    font-family: sans-serif;
+    font-size: 0.9rem;
+    text-decoration: none;
+    color: var(--button-text-color);
+    background-color: var(--button-background-color);
+    border: solid 1px var(--button-border-color);
+    border-radius: 4px;
+    cursor: pointer;
+
+    &:hover {
+        background-color: var(--button-background-color-hover);
+        border-color: var(--button-border-color-hover);
+        color: var(--button-text-color-hover);
+    }
+}
+
+button.inline {
+    min-height: auto;
+    margin: 0;
+    padding: 2px 8px;
+}
+
+
+#search {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 50vh;
+    background: transparent;
+    border: 0;
+
+    form {
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+        max-width: 30em;
+
+        input {
+            font-size: 1rem;
+        }
+
+        input[type="search"] {
+            flex: 1;
+            min-width: 0;
+            margin: 0;
+            padding: 8px;
+            border-radius: 8px 0 0 8px;
+        }
+
+        input[type="submit"] {
+            margin: 0;
+            padding: 8px 16px;
+            border-left: 0;
+            border-radius: 0 8px 8px 0;
+        }
+    }
+}
\ No newline at end of file
diff --git a/static-src/styles/layout.scss b/static-src/styles/layout.scss
new file mode 100644
index 0000000..95e3715
--- /dev/null
+++ b/static-src/styles/layout.scss
@@ -0,0 +1,193 @@
+/*
+Copyright (C) 2023 Yarmo Mackenbach
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU Affero General Public License as published by the Free
+Software Foundation, either version 3 of the License, or (at your option)
+any later version.
+
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+details.
+
+You should have received a copy of the GNU Affero General Public License along
+with this program. If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+If your software can interact with users remotely through a computer network,
+you should also make sure that it provides a way for users to get its source.
+For example, if your program is a web application, its interface could display
+a "Source" link that leads users to an archive of the code. There are many
+ways you could offer source, and different solutions will be better for different
+programs; see section 13 for the specific requirements.
+
+You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary. For
+more information on this, and how to apply and follow the GNU AGPL, see <https://www.gnu.org/licenses/>.
+*/
+body {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    margin: 0 8px;
+    padding: 1.6rem 0 0;
+    line-height: 1.4rem;
+    font-family: sans-serif;
+    color: var(--text-color);
+    background-color: var(--body-background-color);
+}
+
+header {
+    margin: 0 0 3rem;
+
+    nav {
+        flex: 1;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: center;
+        gap: 16px;
+
+        @media screen and (max-width: 400px) {
+            flex-direction: column;
+            align-items: start;
+        }
+        
+        a.logo {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            font-size: 1.8rem;
+            text-decoration: none;
+            font-weight: bold;
+            color: var(--primary-color);
+
+            @media screen and (max-width: 480px) {
+                gap: 8px;
+                font-size: 1.4rem;
+            }
+
+            img {
+                width: 40px;
+                height: 40px;
+
+                @media screen and (max-width: 480px) {
+                    width: 32px;
+                    height: 32px;
+                }
+            }
+        }
+        
+        a.text {
+            margin: 0;
+            color: var(--text-color);
+
+            &:hover, &:active {
+                color: var(--link-color-hover);
+            }
+        }
+
+        .links {
+            display: flex;
+            gap: 12px;
+        }
+    }
+}
+main {
+    flex: 1;
+}
+footer {
+    margin: 4.8rem 0 0;
+    background-color: var(--footer-background-color);
+    color: var(--footer-text-color);
+
+    a {
+        display: inline-block;
+        color: var(--footer-text-color);
+    }
+}
+
+.container {
+    width: 100%;
+    max-width: 920px;
+    margin: 0 auto;
+}
+
+section {
+    margin: 0 0 32px;
+    padding: 16px;
+    background-color: var(--section-background-color);
+    border-radius: 8px;
+
+    h1:first-child, h2:first-child {
+        margin-top: 0;
+    }
+
+    p:last-child {
+        margin-bottom: 0;
+    }
+    
+    &.transparent {
+        padding-left: 0;
+        padding-right: 0;
+        background-color: transparent;
+        border: 0;
+    }
+}
+
+.profile {
+    display: flex;
+    gap: 16px;
+    padding-top: 24px;
+
+    @media screen and (max-width: 600px) {
+        flex-direction: column;
+        padding-top: 32px;
+    }
+
+    .profile__name {
+        font-size: 1.6rem;
+        color: var(--text-color);
+    }
+
+    .profile__header {
+        flex: 3;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 16px;
+        
+        & p, & small {
+            margin: 0;
+        }
+    }
+
+    .profile__claims {
+        flex: 4;
+    }
+
+    .profile__avatar {
+        display: inline-block;
+        min-width: 96px;
+        max-width: 128px;
+        line-height: 0;
+        text-align: center;
+        border-radius: 16px;
+    }
+
+    .persona__description {
+        display: block;
+        margin: 8px 0 8px;
+        font-size: 0.9em;
+
+        svg {
+            width: 16px;
+            height: 16px;
+            vertical-align: sub;
+        }
+    }
+}
\ No newline at end of file
diff --git a/static-src/styles/typography.scss b/static-src/styles/typography.scss
new file mode 100644
index 0000000..e300cfe
--- /dev/null
+++ b/static-src/styles/typography.scss
@@ -0,0 +1,146 @@
+/*
+Copyright (C) 2023 Yarmo Mackenbach
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU Affero General Public License as published by the Free
+Software Foundation, either version 3 of the License, or (at your option)
+any later version.
+
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+details.
+
+You should have received a copy of the GNU Affero General Public License along
+with this program. If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+If your software can interact with users remotely through a computer network,
+you should also make sure that it provides a way for users to get its source.
+For example, if your program is a web application, its interface could display
+a "Source" link that leads users to an archive of the code. There are many
+ways you could offer source, and different solutions will be better for different
+programs; see section 13 for the specific requirements.
+
+You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary. For
+more information on this, and how to apply and follow the GNU AGPL, see <https://www.gnu.org/licenses/>.
+*/
+h1 {
+    font-size: 1.6em;
+    margin: 3.2rem 0 1.6rem;
+    font-weight: normal;
+    color: var(--h1-color);
+    cursor: default;
+}
+h2 {
+    margin: 2em 0 0.5em;
+    font-size: 1.2em;
+    font-weight: bold;
+    color: var(--h2-color);
+    cursor: default;
+    
+    small {
+        margin-left: 0.8rem;
+        padding: 3px 6px;
+        background-color: var(--h2-small-color);
+        color: #fff;
+        border-radius: 4px;
+        font-size: 0.8em;
+    }
+}
+h3 {
+    margin: 1em 0 0.5em;
+    font-size: 1.1em;
+    line-height: 1.6rem;
+    color: var(--h3-color);
+    font-weight: normal;
+    cursor: default;
+    
+    small {
+        margin-left: 0.8rem;
+        padding: 3px 6px;
+        background-color: var(--h3-small-color);
+        color: #fff;
+        border-radius: 4px;
+    }
+}
+h4 {
+    margin: 1.6rem 0;
+    font-size: 1em;
+    line-height: 1.6rem;
+    color: var(--h4-color);
+    font-weight: bold;
+    cursor: default;
+
+    small {
+        margin-left: 0.8rem;
+        padding: 3px 6px;
+        background-color: var(--h4-small-color);
+        color: #fff;
+        border-radius: 4px;
+    }
+}
+a {
+    color: var(--link-color);
+
+    &:hover {
+        color: var(--link-color-hover);
+    }
+}
+a.button i {
+    font-size: 1.4em;
+}
+a.button.button--donate {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    margin-right: 12px;
+    padding: 8px 16px;
+    font-size: 0.95rem;
+    border: 0;
+}
+a.button.button--donate svg {
+    width: 24px;
+    height: 24px;
+    fill: var(--text-color);
+}
+a.button.button--donate.button--opencollective {
+    color: #fff;
+    background-color: #0c2d66;
+}
+a.button.button--donate.button--opencollective svg {
+    fill: #fff;
+}
+a.button.button--donate.button--opencollective:hover {
+    color: #fff;
+    background-color: #144aa9;
+}
+a.button.button--donate.button--liberapay {
+    color: #333;
+    background-color: #ffee16;
+}
+a.button.button--donate.button--liberapay svg {
+    fill: #333;
+}
+a.button.button--donate.button--liberapay:hover {
+    color: #333;
+    background-color: #fff463;
+}
+a.button.button--donate.button--kofi {
+    color: #333;
+    background-color: #1ac0ff;
+}
+a.button.button--donate.button--kofi svg {
+    fill: #333;
+}
+a.button.button--donate.button--kofi:hover {
+    color: #333;
+    background-color: #66d4ff;
+}
+
+ul {
+    padding-left: 1em;
+    list-style: '- ';
+}
\ No newline at end of file
diff --git a/static-src/styles/vars.scss b/static-src/styles/vars.scss
new file mode 100644
index 0000000..6d282d2
--- /dev/null
+++ b/static-src/styles/vars.scss
@@ -0,0 +1,158 @@
+/*
+Copyright (C) 2023 Yarmo Mackenbach
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU Affero General Public License as published by the Free
+Software Foundation, either version 3 of the License, or (at your option)
+any later version.
+
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+details.
+
+You should have received a copy of the GNU Affero General Public License along
+with this program. If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+If your software can interact with users remotely through a computer network,
+you should also make sure that it provides a way for users to get its source.
+For example, if your program is a web application, its interface could display
+a "Source" link that leads users to an archive of the code. There are many
+ways you could offer source, and different solutions will be better for different
+programs; see section 13 for the specific requirements.
+
+You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary. For
+more information on this, and how to apply and follow the GNU AGPL, see <https://www.gnu.org/licenses/>.
+*/
+:root {
+    --white: hsl(0, 0%, 100%);
+    --black: hsl(0, 0%, 0%);
+    --grey-10: hsl(0, 0%, 99%);
+    --grey-50: hsl(0, 0%, 95%);
+    --grey-100: hsl(0, 0%, 90%);
+    --grey-200: hsl(0, 0%, 80%);
+    --grey-300: hsl(0, 0%, 70%);
+    --grey-400: hsl(0, 0%, 60%);
+    --grey-500: hsl(0, 0%, 50%);
+    --grey-600: hsl(0, 0%, 40%);
+    --grey-700: hsl(0, 0%, 30%);
+    --grey-800: hsl(0, 0%, 20%);
+    --grey-900: hsl(0, 0%, 10%);
+    --grey-950: hsl(0, 0%, 7%);
+    --green-300: hsl(110, 45%, 70%);
+    --green-400: hsl(110, 45%, 60%);
+    --green-600: hsl(110, 45%, 40%);
+    --red-300: hsl(10, 60%, 70%);
+    --red-400: hsl(10, 60%, 60%);
+    --blue-500: rgb(67, 176, 234);
+    --blue-700: hsl(201, 90%, 30%);
+    --purple-50: rgb(249, 248, 251);
+    --purple-100: rgb(238, 236, 248);
+    --purple-200: hsl(250, 48%, 90%);
+    --purple-300: hsl(250, 48%, 80%);
+    --purple-400: hsl(250, 48%, 70%);
+    --purple-500: hsl(250, 48%, 65%);
+    --purple-600: hsl(250, 48%, 60%);
+    --purple-700: hsl(250, 48%, 55%);
+    --purple-900: hsl(250, 38%, 45%);
+    --yellow-100: hsl(56, 100%, 95%);
+    --yellow-200: hsl(56, 100%, 90%);
+    --yellow-500: hsl(56, 100%, 65%);
+}
+
+:root {
+    --primary-color: var(--purple-700);
+    --primary-color-subtle: var(--purple-400);
+
+    --body-background-color: #fafafa;
+    --section-background-color: var(--white);
+
+    --text-color: var(--grey-800);
+    --text-color-subtle: var(--grey-500);
+    --h1-color: var(--text-color);
+    --h2-color: var(--text-color);
+    --h2-small-color: var(--primary-color-subtle);
+    --h3-color: var(--text-color-subtle);
+    --h3-small-color: var(--primary-color-subtle);
+    --h4-color: var(--text-color-subtle);
+    --h4-small-color: var(--primary-color-subtle);
+
+    --link-color: var(--blue-700);
+    --link-color-subtle: var(--text-color);
+    --link-color-hover: var(--purple-700);
+
+    --button-text-color: var(--text-color);
+    --button-text-color-hover: var(--text-color);
+    --button-border-color: var(--grey-300);
+    --button-border-color-hover: var(--grey-300);
+    --button-background-color: var(--grey-100);
+    --button-background-color-hover: var(--grey-200);
+
+    --input-text-color: var(--text-color);
+    --input-text-color-hover: var(--text-color);
+    --input-border-color: var(--grey-300);
+    --input-border-color-hover: var(--grey-300);
+    --input-background-color: var(--white);
+    --input-background-color-hover: var(--white);
+
+    --footer-text-color: var(--text-color-subtle);
+    
+    @media (prefers-color-scheme: dark) {
+        --primary-color: var(--purple-300);
+        --primary-color-subtle: var(--purple-500);
+
+        --body-background-color: #0a0a0a;
+        --section-background-color: var(--grey-900);
+
+        --text-color: var(--grey-50);
+        --text-color-subtle: var(--grey-300);
+        --h1-color: var(--text-color);
+        --h2-color: var(--text-color);
+        --h2-small-color: var(--primary-color-subtle);
+        --h3-color: var(--text-color-subtle);
+        --h3-small-color: var(--primary-color-subtle);
+        --h4-color: var(--text-color-subtle);
+        --h4-small-color: var(--primary-color-subtle);
+
+        --link-color: var(--blue-500);
+        --link-color-subtle: var(--text-color);
+        --link-color-hover: var(--primary-color);
+
+        --button-text-color: var(--text-color);
+        --button-text-color-hover: var(--text-color);
+        --button-border-color: var(--grey-700);
+        --button-border-color-hover: var(--grey-700);
+        --button-background-color: var(--grey-700);
+        --button-background-color-hover: var(--grey-600);
+
+        --input-text-color: var(--text-color);
+        --input-text-color-hover: var(--text-color);
+        --input-border-color: var(--grey-700);
+        --input-border-color-hover: var(--grey-700);
+        --input-background-color: var(--grey-800);
+        --input-background-color-hover: var(--grey-800);
+
+        --footer-text-color: var(--text-color-subtle);
+    }
+}
+
+kx-claim, kx-key {
+    --loader-color: var(--grey-400);
+    --success-color: var(--green-600);
+    --failure-color: var(--red-400);
+
+    --background-color: var(--grey-10);
+    --header-background-color: var(--grey-50);
+    
+    @media (prefers-color-scheme: dark) {
+        --loader-color: var(--grey-400);
+        --success-color: var(--green-400);
+        --failure-color: var(--red-300);
+    
+        --background-color: var(--grey-800);
+        --header-background-color: var(--grey-700);    
+    }
+}
\ No newline at end of file