From 67f7aa680895212a9bbbdd17b8a8bf082a626d42 Mon Sep 17 00:00:00 2001
From: Christoph Kraemer <mail@christophkraemer.de>
Date: Sun, 16 Jun 2024 22:38:28 +0200
Subject: [PATCH] feat: use tailwind css

---
 .eslintrc                                   |   2 +-
 package.json                                |   4 +-
 pnpm-lock.yaml                              | 425 +++++++++++++-------
 postcss.config.js                           |   4 +-
 src/app.tsx                                 |   1 +
 src/components/AppShell.css                 |  38 --
 src/components/AppShell.tsx                 |  33 +-
 src/components/Box.tsx                      |  15 +
 src/components/CheckBox.css                 |  39 --
 src/components/CheckBox.tsx                 |   6 +-
 src/components/Dropdown.tsx                 |  99 +++++
 src/components/HandballRules.css            |   9 -
 src/components/HandballRules.tsx            |  54 +--
 src/components/Info.css                     |  49 ---
 src/components/Info.tsx                     |  92 ++---
 src/components/Item.tsx                     |  43 +-
 src/components/LanguagePicker.css           |  99 -----
 src/components/LanguagePicker.tsx           | 104 ++---
 src/components/Loading.css                  | 103 -----
 src/components/Loading.tsx                  |  43 +-
 src/components/Menu.css                     | 108 -----
 src/components/Menu.tsx                     |  55 +--
 src/components/RulesSelector.css            | 101 -----
 src/components/RulesSelector.tsx            |  71 +++-
 src/components/Tracking.css                 |  50 ---
 src/components/Tracking.tsx                 |  13 +-
 src/components/VersionPicker.css            |  99 -----
 src/components/VersionPicker.tsx            |  77 +---
 src/components/rules-test/RelevantRules.css |   9 -
 src/components/rules-test/RelevantRules.tsx |   9 +-
 src/components/rules-test/RulesTest.css     |  90 -----
 src/components/rules-test/RulesTest.tsx     |  36 +-
 src/components/shared.css                   |  26 --
 src/components/stats/Question.css           |  80 ----
 src/components/stats/Question.tsx           |  41 +-
 src/components/stats/Rule.css               |  46 ---
 src/components/stats/Rule.tsx               |  17 +-
 src/components/stats/Stats.css              |  39 --
 src/components/stats/Stats.tsx              |  22 +-
 src/styles.css                              |   3 +
 tailwind.config.ts                          |  76 ++++
 41 files changed, 768 insertions(+), 1562 deletions(-)
 delete mode 100644 src/components/AppShell.css
 create mode 100644 src/components/Box.tsx
 delete mode 100644 src/components/CheckBox.css
 create mode 100644 src/components/Dropdown.tsx
 delete mode 100644 src/components/HandballRules.css
 delete mode 100644 src/components/Info.css
 delete mode 100644 src/components/LanguagePicker.css
 delete mode 100644 src/components/Loading.css
 delete mode 100644 src/components/Menu.css
 delete mode 100644 src/components/RulesSelector.css
 delete mode 100644 src/components/Tracking.css
 delete mode 100644 src/components/VersionPicker.css
 delete mode 100644 src/components/rules-test/RelevantRules.css
 delete mode 100644 src/components/rules-test/RulesTest.css
 delete mode 100644 src/components/shared.css
 delete mode 100644 src/components/stats/Question.css
 delete mode 100644 src/components/stats/Rule.css
 delete mode 100644 src/components/stats/Stats.css
 create mode 100644 src/styles.css
 create mode 100644 tailwind.config.ts

diff --git a/.eslintrc b/.eslintrc
index c958de7..1c07b9a 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -48,7 +48,7 @@
     "react/prop-types": "off",
     "react/static-property-placement": ["error", "static public field"],
     "react/function-component-definition": ["error", {
-      "namedComponents": "arrow-function",
+      "namedComponents": ["arrow-function", "function-declaration"],
       "unnamedComponents": "function-expression"
     }],
     "react/require-default-props": "off",
diff --git a/package.json b/package.json
index a4606fa..bc6287d 100644
--- a/package.json
+++ b/package.json
@@ -69,12 +69,12 @@
     "markdown-loader": "^8.0.0",
     "marked": "^12.0.2",
     "postcss": "^8.4.38",
-    "postcss-custom-properties": "^13.3.10",
+    "postcss-import": "^16.1.0",
     "postcss-loader": "^8.1.1",
-    "postcss-nesting": "^12.1.5",
     "raw-loader": "^4.0.2",
     "rimraf": "^3.0.2",
     "style-loader": "^4.0.0",
+    "tailwindcss": "^3.4.4",
     "ts-jest": "^29.1.4",
     "typescript": "^5.4.5",
     "webpack": "^5.91.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9836514..83f18ae 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -168,15 +168,12 @@ importers:
       postcss:
         specifier: ^8.4.38
         version: 8.4.38
-      postcss-custom-properties:
-        specifier: ^13.3.10
-        version: 13.3.10(postcss@8.4.38)
+      postcss-import:
+        specifier: ^16.1.0
+        version: 16.1.0(postcss@8.4.38)
       postcss-loader:
         specifier: ^8.1.1
         version: 8.1.1(postcss@8.4.38)(typescript@5.4.5)(webpack@5.91.0(webpack-cli@5.1.4))
-      postcss-nesting:
-        specifier: ^12.1.5
-        version: 12.1.5(postcss@8.4.38)
       raw-loader:
         specifier: ^4.0.2
         version: 4.0.2(webpack@5.91.0(webpack-cli@5.1.4))
@@ -186,6 +183,9 @@ importers:
       style-loader:
         specifier: ^4.0.0
         version: 4.0.0(webpack@5.91.0(webpack-cli@5.1.4))
+      tailwindcss:
+        specifier: ^3.4.4
+        version: 3.4.4
       ts-jest:
         specifier: ^29.1.4
         version: 29.1.4(@babel/core@7.24.7)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.24.7))(jest@29.7.0(@types/node@14.14.22))(typescript@5.4.5)
@@ -213,6 +213,10 @@ importers:
 
 packages:
 
+  '@alloc/quick-lru@5.2.0':
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==, tarball: https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz}
+    engines: {node: '>=10'}
+
   '@ampproject/remapping@2.3.0':
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
@@ -877,41 +881,6 @@ packages:
   '@bcoe/v8-coverage@0.2.3':
     resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
 
-  '@csstools/cascade-layer-name-parser@1.0.11':
-    resolution: {integrity: sha512-yhsonEAhaWRQvHFYhSzOUobH2Ev++fMci+ppFRagw0qVSPlcPV4FnNmlwpM/b2BM10ZeMRkVV4So6YRswD0O0w==, tarball: https://registry.npmjs.org/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-1.0.11.tgz}
-    engines: {node: ^14 || ^16 || >=18}
-    peerDependencies:
-      '@csstools/css-parser-algorithms': ^2.6.3
-      '@csstools/css-tokenizer': ^2.3.1
-
-  '@csstools/css-parser-algorithms@2.6.3':
-    resolution: {integrity: sha512-xI/tL2zxzEbESvnSxwFgwvy5HS00oCXxL4MLs6HUiDcYfwowsoQaABKxUElp1ARITrINzBnsECOc1q0eg2GOrA==, tarball: https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.6.3.tgz}
-    engines: {node: ^14 || ^16 || >=18}
-    peerDependencies:
-      '@csstools/css-tokenizer': ^2.3.1
-
-  '@csstools/css-tokenizer@2.3.1':
-    resolution: {integrity: sha512-iMNHTyxLbBlWIfGtabT157LH9DUx9X8+Y3oymFEuMj8HNc+rpE3dPFGFgHjpKfjeFDjLjYIAIhXPGvS2lKxL9g==, tarball: https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.3.1.tgz}
-    engines: {node: ^14 || ^16 || >=18}
-
-  '@csstools/selector-resolve-nested@1.1.0':
-    resolution: {integrity: sha512-uWvSaeRcHyeNenKg8tp17EVDRkpflmdyvbE0DHo6D/GdBb6PDnCYYU6gRpXhtICMGMcahQmj2zGxwFM/WC8hCg==, tarball: https://registry.npmjs.org/@csstools/selector-resolve-nested/-/selector-resolve-nested-1.1.0.tgz}
-    engines: {node: ^14 || ^16 || >=18}
-    peerDependencies:
-      postcss-selector-parser: ^6.0.13
-
-  '@csstools/selector-specificity@3.1.1':
-    resolution: {integrity: sha512-a7cxGcJ2wIlMFLlh8z2ONm+715QkPHiyJcxwQlKOz/03GPw1COpfhcmC9wm4xlZfp//jWHNNMwzjtqHXVWU9KA==, tarball: https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.1.1.tgz}
-    engines: {node: ^14 || ^16 || >=18}
-    peerDependencies:
-      postcss-selector-parser: ^6.0.13
-
-  '@csstools/utilities@1.0.0':
-    resolution: {integrity: sha512-tAgvZQe/t2mlvpNosA4+CkMiZ2azISW5WPAcdSalZlEjQvUfghHxfQcrCiK/7/CrfAWVxyM88kGFYO82heIGDg==, tarball: https://registry.npmjs.org/@csstools/utilities/-/utilities-1.0.0.tgz}
-    engines: {node: ^14 || ^16 || >=18}
-    peerDependencies:
-      postcss: ^8.4
-
   '@discoveryjs/json-ext@0.5.7':
     resolution: {integrity: sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==}
     engines: {node: '>=10.0.0'}
@@ -964,7 +933,7 @@ packages:
     resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
 
   '@isaacs/cliui@8.0.2':
-    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
+    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==, tarball: https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz}
     engines: {node: '>=12'}
 
   '@istanbuljs/load-nyc-config@1.1.0':
@@ -1046,25 +1015,25 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
   '@jridgewell/gen-mapping@0.3.5':
-    resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
+    resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==, tarball: https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz}
     engines: {node: '>=6.0.0'}
 
   '@jridgewell/resolve-uri@3.1.2':
-    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==, tarball: https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz}
     engines: {node: '>=6.0.0'}
 
   '@jridgewell/set-array@1.2.1':
-    resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
+    resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==, tarball: https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz}
     engines: {node: '>=6.0.0'}
 
   '@jridgewell/source-map@0.3.6':
     resolution: {integrity: sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==}
 
   '@jridgewell/sourcemap-codec@1.4.15':
-    resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
+    resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==, tarball: https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz}
 
   '@jridgewell/trace-mapping@0.3.25':
-    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
+    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==, tarball: https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz}
 
   '@jsonjoy.com/base64@1.1.2':
     resolution: {integrity: sha512-q6XAnWQDIMA3+FTiOYajoYqySkO+JSat0ytXGSuRdq9uXE7o92gzuQwQM14xaCRlBLGq3v5miDGC4vkVTn54xA==}
@@ -1120,7 +1089,7 @@ packages:
     engines: {node: '>= 8'}
 
   '@nodelib/fs.stat@2.0.5':
-    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==, tarball: https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz}
     engines: {node: '>= 8'}
 
   '@nodelib/fs.walk@1.2.8':
@@ -1560,7 +1529,7 @@ packages:
     engines: {node: '>=8'}
 
   ansi-regex@6.0.1:
-    resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==}
+    resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==, tarball: https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz}
     engines: {node: '>=12'}
 
   ansi-styles@3.2.1:
@@ -1568,7 +1537,7 @@ packages:
     engines: {node: '>=4'}
 
   ansi-styles@4.3.0:
-    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==, tarball: https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz}
     engines: {node: '>=8'}
 
   ansi-styles@5.2.0:
@@ -1579,10 +1548,16 @@ packages:
     resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==, tarball: https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz}
     engines: {node: '>=12'}
 
+  any-promise@1.3.0:
+    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==, tarball: https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz}
+
   anymatch@3.1.3:
-    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==, tarball: https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz}
     engines: {node: '>= 8'}
 
+  arg@5.0.2:
+    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==, tarball: https://registry.npmjs.org/arg/-/arg-5.0.2.tgz}
+
   argparse@1.0.10:
     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
 
@@ -1710,7 +1685,7 @@ packages:
       '@babel/core': ^7.0.0
 
   balanced-match@1.0.0:
-    resolution: {integrity: sha512-9Y0g0Q8rmSt+H33DfKv7FOc3v+iRI+o1lbzt8jGcIosYW37IIW/2XVYq5NPdmaD5NQ59Nk26Kl/vZbwW9Fr8vg==}
+    resolution: {integrity: sha512-9Y0g0Q8rmSt+H33DfKv7FOc3v+iRI+o1lbzt8jGcIosYW37IIW/2XVYq5NPdmaD5NQ59Nk26Kl/vZbwW9Fr8vg==, tarball: https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz}
 
   batch@0.6.1:
     resolution: {integrity: sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==}
@@ -1719,7 +1694,7 @@ packages:
     resolution: {integrity: sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==}
 
   binary-extensions@2.2.0:
-    resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
+    resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==, tarball: https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz}
     engines: {node: '>=8'}
 
   body-parser@1.20.2:
@@ -1736,11 +1711,7 @@ packages:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
 
   brace-expansion@2.0.1:
-    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
-
-  braces@3.0.2:
-    resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
-    engines: {node: '>=8'}
+    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==, tarball: https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz}
 
   braces@3.0.3:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==, tarball: https://registry.npmjs.org/braces/-/braces-3.0.3.tgz}
@@ -1788,6 +1759,10 @@ packages:
   camel-case@4.1.2:
     resolution: {integrity: sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==}
 
+  camelcase-css@2.0.1:
+    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==, tarball: https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz}
+    engines: {node: '>= 6'}
+
   camelcase@5.3.1:
     resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
     engines: {node: '>=6'}
@@ -1812,7 +1787,7 @@ packages:
     engines: {node: '>=10'}
 
   chokidar@3.6.0:
-    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
+    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==, tarball: https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz}
     engines: {node: '>= 8.10.0'}
 
   chrome-trace-event@1.0.2:
@@ -1849,34 +1824,38 @@ packages:
     resolution: {integrity: sha512-iBPtljfCNcTKNAto0KEtDfZ3qzjJvqE3aTGZsbhjSBlorqpXJlaWWtPO35D+ZImoC3KWejX64o+yPGxhWSTzfg==}
 
   color-convert@1.9.3:
-    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
+    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==, tarball: https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz}
 
   color-convert@2.0.1:
-    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==, tarball: https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz}
     engines: {node: '>=7.0.0'}
 
   color-name@1.1.3:
-    resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
+    resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==, tarball: https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz}
 
   color-name@1.1.4:
-    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==, tarball: https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz}
 
   colorette@2.0.20:
     resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
 
   commander@10.0.1:
-    resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
+    resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==, tarball: https://registry.npmjs.org/commander/-/commander-10.0.1.tgz}
     engines: {node: '>=14'}
 
   commander@2.20.3:
-    resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
+    resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==, tarball: https://registry.npmjs.org/commander/-/commander-2.20.3.tgz}
+
+  commander@4.1.1:
+    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==, tarball: https://registry.npmjs.org/commander/-/commander-4.1.1.tgz}
+    engines: {node: '>= 6'}
 
   commander@7.2.0:
     resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
     engines: {node: '>= 10'}
 
   commander@8.3.0:
-    resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
+    resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==, tarball: https://registry.npmjs.org/commander/-/commander-8.3.0.tgz}
     engines: {node: '>= 12'}
 
   common-path-prefix@3.0.0:
@@ -1983,7 +1962,7 @@ packages:
     engines: {node: '>= 6'}
 
   cssesc@3.0.0:
-    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==, tarball: https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz}
     engines: {node: '>=4'}
     hasBin: true
 
@@ -2095,6 +2074,9 @@ packages:
   detect-node@2.0.4:
     resolution: {integrity: sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw==}
 
+  didyoumean@1.2.2:
+    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==, tarball: https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz}
+
   diff-sequences@29.6.3:
     resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==, tarball: https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -2103,6 +2085,9 @@ packages:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
 
+  dlv@1.1.3:
+    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==, tarball: https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz}
+
   dns-packet@5.6.1:
     resolution: {integrity: sha512-l4gcSouhcgIKRvyy99RNVOgxXiicE+2jZoNmaNmZ6JXiGajBOJAesk1OBlJuM5k2c+eudGdLxDqXuPCKIj6kpw==}
     engines: {node: '>=6'}
@@ -2145,7 +2130,7 @@ packages:
     resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
 
   eastasianwidth@0.2.0:
-    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
+    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==, tarball: https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz}
 
   ee-first@1.1.1:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
@@ -2163,7 +2148,7 @@ packages:
     engines: {node: '>=12'}
 
   emoji-regex@8.0.0:
-    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==, tarball: https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz}
 
   emoji-regex@9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
@@ -2412,7 +2397,7 @@ packages:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
   fast-glob@3.3.2:
-    resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
+    resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==, tarball: https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz}
     engines: {node: '>=8.6.0'}
 
   fast-json-stable-stringify@2.1.0:
@@ -2504,7 +2489,7 @@ packages:
     resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
 
   foreground-child@3.1.1:
-    resolution: {integrity: sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==}
+    resolution: {integrity: sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==, tarball: https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz}
     engines: {node: '>=14'}
 
   forwarded@0.2.0:
@@ -2568,18 +2553,18 @@ packages:
     engines: {node: '>= 0.4'}
 
   glob-parent@5.1.2:
-    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==, tarball: https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz}
     engines: {node: '>= 6'}
 
   glob-parent@6.0.2:
-    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==, tarball: https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz}
     engines: {node: '>=10.13.0'}
 
   glob-to-regexp@0.4.1:
     resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
 
   glob@10.4.1:
-    resolution: {integrity: sha512-2jelhlq3E4ho74ZyVLN03oKdAZVUa6UDZzFLVH1H7dnoax+y9qyaq8zBkfDIggjniU19z0wU18y16jMB2eyVIw==}
+    resolution: {integrity: sha512-2jelhlq3E4ho74ZyVLN03oKdAZVUa6UDZzFLVH1H7dnoax+y9qyaq8zBkfDIggjniU19z0wU18y16jMB2eyVIw==, tarball: https://registry.npmjs.org/glob/-/glob-10.4.1.tgz}
     engines: {node: '>=16 || 14 >=14.18'}
     hasBin: true
 
@@ -2821,7 +2806,7 @@ packages:
     resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
 
   is-binary-path@2.1.0:
-    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==, tarball: https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz}
     engines: {node: '>=8'}
 
   is-boolean-object@1.1.2:
@@ -2837,7 +2822,7 @@ packages:
     engines: {node: '>= 0.4'}
 
   is-core-module@2.13.1:
-    resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==}
+    resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==, tarball: https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz}
 
   is-data-view@1.0.1:
     resolution: {integrity: sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==}
@@ -2857,14 +2842,14 @@ packages:
     hasBin: true
 
   is-extglob@2.1.1:
-    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==, tarball: https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz}
     engines: {node: '>=0.10.0'}
 
   is-finalizationregistry@1.0.2:
     resolution: {integrity: sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==}
 
   is-fullwidth-code-point@3.0.0:
-    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==, tarball: https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz}
     engines: {node: '>=8'}
 
   is-generator-fn@2.1.0:
@@ -2880,7 +2865,7 @@ packages:
     engines: {node: '>=0.10.0'}
 
   is-glob@4.0.3:
-    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==, tarball: https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz}
     engines: {node: '>=0.10.0'}
 
   is-inside-container@1.0.0:
@@ -3019,7 +3004,7 @@ packages:
     resolution: {integrity: sha512-DR33HMMr8EzwuRL8Y9D3u2BMj8+RqSE850jfGu59kS7tbmPLzGkZmVSfyCFSDxuZiEY6Rzt3T2NA/qU+NwVj1w==}
 
   jackspeak@3.4.0:
-    resolution: {integrity: sha512-JVYhQnN59LVPFCEcVa2C3CrEKYacvjRfqIQl+h8oi91aLYQVWRYbxjPcv1bUiUy/kLmQaANrYfNMCO3kuEDHfw==}
+    resolution: {integrity: sha512-JVYhQnN59LVPFCEcVa2C3CrEKYacvjRfqIQl+h8oi91aLYQVWRYbxjPcv1bUiUy/kLmQaANrYfNMCO3kuEDHfw==, tarball: https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.0.tgz}
     engines: {node: '>=14'}
 
   jake@10.9.1:
@@ -3161,7 +3146,7 @@ packages:
         optional: true
 
   jiti@1.21.3:
-    resolution: {integrity: sha512-uy2bNX5zQ+tESe+TiC7ilGRz8AtRGmnJH55NC5S0nSUjvvvM2hJHmefHErugGXN4pNv4Qx7vLsnNw9qJ9mtIsw==}
+    resolution: {integrity: sha512-uy2bNX5zQ+tESe+TiC7ilGRz8AtRGmnJH55NC5S0nSUjvvvM2hJHmefHErugGXN4pNv4Qx7vLsnNw9qJ9mtIsw==, tarball: https://registry.npmjs.org/jiti/-/jiti-1.21.3.tgz}
     hasBin: true
 
   js-tokens@4.0.0:
@@ -3255,8 +3240,16 @@ packages:
     resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
     engines: {node: '>= 0.8.0'}
 
+  lilconfig@2.1.0:
+    resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==, tarball: https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz}
+    engines: {node: '>=10'}
+
+  lilconfig@3.1.2:
+    resolution: {integrity: sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==, tarball: https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz}
+    engines: {node: '>=14'}
+
   lines-and-columns@1.1.6:
-    resolution: {integrity: sha512-8ZmlJFVK9iCmtLz19HpSsR8HaAMWBT284VMNednLwlIMDP2hJDCIhUp0IZ2xUcZ+Ob6BM0VvCSJwzASDM45NLQ==}
+    resolution: {integrity: sha512-8ZmlJFVK9iCmtLz19HpSsR8HaAMWBT284VMNednLwlIMDP2hJDCIhUp0IZ2xUcZ+Ob6BM0VvCSJwzASDM45NLQ==, tarball: https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz}
 
   loader-runner@4.3.0:
     resolution: {integrity: sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==}
@@ -3305,7 +3298,7 @@ packages:
     resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
 
   lru-cache@10.2.2:
-    resolution: {integrity: sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==}
+    resolution: {integrity: sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==, tarball: https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.2.tgz}
     engines: {node: 14 || >=16.14}
 
   lru-cache@5.1.1:
@@ -3359,7 +3352,7 @@ packages:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
 
   merge2@1.4.1:
-    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==, tarball: https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz}
     engines: {node: '>= 8'}
 
   methods@1.1.2:
@@ -3394,18 +3387,18 @@ packages:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
 
   minimatch@5.1.6:
-    resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==}
+    resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==, tarball: https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz}
     engines: {node: '>=10'}
 
   minimatch@9.0.4:
-    resolution: {integrity: sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==}
+    resolution: {integrity: sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==, tarball: https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz}
     engines: {node: '>=16 || 14 >=14.17'}
 
   minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
 
   minipass@7.1.2:
-    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
+    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==, tarball: https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz}
     engines: {node: '>=16 || 14 >=14.17'}
 
   mrmime@2.0.0:
@@ -3425,6 +3418,9 @@ packages:
     resolution: {integrity: sha512-2eznPJP8z2BFLX50tf0LuODrpINqP1RVIm/CObbTcBRITQgmC/TjcREF1NeTBzIcR5XO/ukWo+YHOjBbFwIupg==}
     hasBin: true
 
+  mz@2.7.0:
+    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==, tarball: https://registry.npmjs.org/mz/-/mz-2.7.0.tgz}
+
   nanoid@3.3.7:
     resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -3454,7 +3450,7 @@ packages:
     resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==}
 
   normalize-path@3.0.0:
-    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==, tarball: https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz}
     engines: {node: '>=0.10.0'}
 
   normalize-range@0.1.2:
@@ -3472,6 +3468,10 @@ packages:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==, tarball: https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz}
     engines: {node: '>=0.10.0'}
 
+  object-hash@3.0.0:
+    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==, tarball: https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz}
+    engines: {node: '>= 6'}
+
   object-inspect@1.13.1:
     resolution: {integrity: sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==}
 
@@ -3611,10 +3611,10 @@ packages:
     engines: {node: '>=8'}
 
   path-parse@1.0.7:
-    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==, tarball: https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz}
 
   path-scurry@1.11.1:
-    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
+    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==, tarball: https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz}
     engines: {node: '>=16 || 14 >=14.18'}
 
   path-to-regexp@0.1.7:
@@ -3629,12 +3629,16 @@ packages:
     engines: {node: '>=12'}
 
   picocolors@1.0.1:
-    resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==}
+    resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==, tarball: https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz}
 
   picomatch@2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==, tarball: https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz}
     engines: {node: '>=8.6'}
 
+  pify@2.3.0:
+    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==, tarball: https://registry.npmjs.org/pify/-/pify-2.3.0.tgz}
+    engines: {node: '>=0.10.0'}
+
   pify@4.0.1:
     resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
     engines: {node: '>=6'}
@@ -3659,11 +3663,35 @@ packages:
     resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==}
     engines: {node: '>= 0.4'}
 
-  postcss-custom-properties@13.3.10:
-    resolution: {integrity: sha512-ejaalIpl7p0k0L5ngIZ86AZGmp3m1KdeOCbSQTK4gQcB1ncaoPTHorw206+tsZRIhIDYvh5ZButEje6740YDXw==, tarball: https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-13.3.10.tgz}
-    engines: {node: ^14 || ^16 || >=18}
+  postcss-import@15.1.0:
+    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==, tarball: https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      postcss: ^8.0.0
+
+  postcss-import@16.1.0:
+    resolution: {integrity: sha512-7hsAZ4xGXl4MW+OKEWCnF6T5jqBw80/EE9aXg1r2yyn1RsVEU8EtKXbijEODa+rg7iih4bKf7vlvTGYR4CnPNg==, tarball: https://registry.npmjs.org/postcss-import/-/postcss-import-16.1.0.tgz}
+    engines: {node: '>=18.0.0'}
     peerDependencies:
-      postcss: ^8.4
+      postcss: ^8.0.0
+
+  postcss-js@4.0.1:
+    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==, tarball: https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz}
+    engines: {node: ^12 || ^14 || >= 16}
+    peerDependencies:
+      postcss: ^8.4.21
+
+  postcss-load-config@4.0.2:
+    resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==, tarball: https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz}
+    engines: {node: '>= 14'}
+    peerDependencies:
+      postcss: '>=8.0.9'
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+      ts-node:
+        optional: true
 
   postcss-loader@8.1.1:
     resolution: {integrity: sha512-0IeqyAsG6tYiDRCYKQJLAmgQr47DX6N7sFSWvQxt6AcupX8DIdmykuk/o/tx0Lze3ErGHJEp5OSRxrelC6+NdQ==}
@@ -3702,14 +3730,14 @@ packages:
     peerDependencies:
       postcss: ^8.1.0
 
-  postcss-nesting@12.1.5:
-    resolution: {integrity: sha512-N1NgI1PDCiAGWPTYrwqm8wpjv0bgDmkYHH72pNsqTCv9CObxjxftdYu6AKtGN+pnJa7FQjMm3v4sp8QJbFsYdQ==, tarball: https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-12.1.5.tgz}
-    engines: {node: ^14 || ^16 || >=18}
+  postcss-nested@6.0.1:
+    resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==, tarball: https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz}
+    engines: {node: '>=12.0'}
     peerDependencies:
-      postcss: ^8.4
+      postcss: ^8.2.14
 
   postcss-selector-parser@6.1.0:
-    resolution: {integrity: sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==}
+    resolution: {integrity: sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==, tarball: https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.0.tgz}
     engines: {node: '>=4'}
 
   postcss-value-parser@4.2.0:
@@ -3828,6 +3856,9 @@ packages:
     resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==, tarball: https://registry.npmjs.org/react/-/react-18.3.1.tgz}
     engines: {node: '>=0.10.0'}
 
+  read-cache@1.0.0:
+    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==, tarball: https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz}
+
   readable-stream@2.3.7:
     resolution: {integrity: sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==}
 
@@ -3836,7 +3867,7 @@ packages:
     engines: {node: '>= 6'}
 
   readdirp@3.6.0:
-    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==, tarball: https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz}
     engines: {node: '>=8.10.0'}
 
   rechoir@0.8.0:
@@ -3910,7 +3941,7 @@ packages:
     engines: {node: '>=10'}
 
   resolve@1.22.8:
-    resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
+    resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==, tarball: https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz}
     hasBin: true
 
   resolve@2.0.0-next.5:
@@ -4047,10 +4078,10 @@ packages:
     engines: {node: '>= 0.4'}
 
   signal-exit@3.0.7:
-    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
+    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==, tarball: https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz}
 
   signal-exit@4.1.0:
-    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==, tarball: https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz}
     engines: {node: '>=14'}
 
   sirv@2.0.4:
@@ -4132,11 +4163,11 @@ packages:
     engines: {node: '>=10'}
 
   string-width@4.2.3:
-    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==, tarball: https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz}
     engines: {node: '>=8'}
 
   string-width@5.1.2:
-    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
+    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==, tarball: https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz}
     engines: {node: '>=12'}
 
   string.prototype.matchall@4.0.11:
@@ -4169,7 +4200,7 @@ packages:
     engines: {node: '>=8'}
 
   strip-ansi@7.1.0:
-    resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
+    resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==, tarball: https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz}
     engines: {node: '>=12'}
 
   strip-bom@3.0.0:
@@ -4198,6 +4229,11 @@ packages:
     peerDependencies:
       webpack: ^5.27.0
 
+  sucrase@3.35.0:
+    resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==, tarball: https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz}
+    engines: {node: '>=16 || 14 >=14.17'}
+    hasBin: true
+
   supports-color@5.5.0:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
     engines: {node: '>=4'}
@@ -4211,9 +4247,14 @@ packages:
     engines: {node: '>=10'}
 
   supports-preserve-symlinks-flag@1.0.0:
-    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==, tarball: https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz}
     engines: {node: '>= 0.4'}
 
+  tailwindcss@3.4.4:
+    resolution: {integrity: sha512-ZoyXOdJjISB7/BcLTR6SEsLgKtDStYyYZVLsUtWChO4Ps20CBad7lfJKVDiejocV4ME1hLmyY0WJE3hSDcmQ2A==, tarball: https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.4.tgz}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+
   tapable@2.2.1:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
     engines: {node: '>=6'}
@@ -4254,6 +4295,13 @@ packages:
   text-table@0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
 
+  thenify-all@1.6.0:
+    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==, tarball: https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz}
+    engines: {node: '>=0.8'}
+
+  thenify@3.3.1:
+    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==, tarball: https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz}
+
   thingies@1.21.0:
     resolution: {integrity: sha512-hsqsJsFMsV+aD4s3CWKk85ep/3I9XzYV/IXaSouJMYIoDlgyi11cBhsqYe9/geRfB0YIikBQg6raRaM+nIMP9g==}
     engines: {node: '>=10.18'}
@@ -4297,6 +4345,9 @@ packages:
     peerDependencies:
       typescript: '>=4.2.0'
 
+  ts-interface-checker@0.1.13:
+    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==, tarball: https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz}
+
   ts-invariant@0.4.4:
     resolution: {integrity: sha512-uEtWkFM/sdZvRNNDL3Ehu4WVpwaulhwQszV8mrtcdeE8nN00BV9mAmQ88RkrBhFgl9gMgvjJLAQcZbnPXI9mlA==}
 
@@ -4427,7 +4478,7 @@ packages:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
   util-deprecate@1.0.2:
-    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==, tarball: https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz}
 
   utila@0.4.0:
     resolution: {integrity: sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA==}
@@ -4630,11 +4681,11 @@ packages:
     resolution: {integrity: sha512-ZHeROyqR+AS5UPzholQRDttLFqGMwP0Np8MKWAdyxsDETxq3qOAyXvqessc3GniohG6e0mAqSQyKOHmT8zPF7g==}
 
   wrap-ansi@7.0.0:
-    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
+    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==, tarball: https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz}
     engines: {node: '>=10'}
 
   wrap-ansi@8.1.0:
-    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
+    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==, tarball: https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz}
     engines: {node: '>=12'}
 
   wrappy@1.0.2:
@@ -4675,6 +4726,11 @@ packages:
   yallist@3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
 
+  yaml@2.4.5:
+    resolution: {integrity: sha512-aBx2bnqDzVOyNKfsysjA2ms5ZlnjSAW2eG3/L5G/CSujfjLJTJsEw1bGw8kCf04KodQWk1pxlGnZ56CRxiawmg==, tarball: https://registry.npmjs.org/yaml/-/yaml-2.4.5.tgz}
+    engines: {node: '>= 14'}
+    hasBin: true
+
   yargs-parser@21.1.1:
     resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
     engines: {node: '>=12'}
@@ -4693,6 +4749,8 @@ packages:
 
 snapshots:
 
+  '@alloc/quick-lru@5.2.0': {}
+
   '@ampproject/remapping@2.3.0':
     dependencies:
       '@jridgewell/gen-mapping': 0.3.5
@@ -5573,29 +5631,6 @@ snapshots:
 
   '@bcoe/v8-coverage@0.2.3': {}
 
-  '@csstools/cascade-layer-name-parser@1.0.11(@csstools/css-parser-algorithms@2.6.3(@csstools/css-tokenizer@2.3.1))(@csstools/css-tokenizer@2.3.1)':
-    dependencies:
-      '@csstools/css-parser-algorithms': 2.6.3(@csstools/css-tokenizer@2.3.1)
-      '@csstools/css-tokenizer': 2.3.1
-
-  '@csstools/css-parser-algorithms@2.6.3(@csstools/css-tokenizer@2.3.1)':
-    dependencies:
-      '@csstools/css-tokenizer': 2.3.1
-
-  '@csstools/css-tokenizer@2.3.1': {}
-
-  '@csstools/selector-resolve-nested@1.1.0(postcss-selector-parser@6.1.0)':
-    dependencies:
-      postcss-selector-parser: 6.1.0
-
-  '@csstools/selector-specificity@3.1.1(postcss-selector-parser@6.1.0)':
-    dependencies:
-      postcss-selector-parser: 6.1.0
-
-  '@csstools/utilities@1.0.0(postcss@8.4.38)':
-    dependencies:
-      postcss: 8.4.38
-
   '@discoveryjs/json-ext@0.5.7': {}
 
   '@eslint-community/eslint-utils@4.4.0(eslint@8.57.0)':
@@ -6434,11 +6469,15 @@ snapshots:
 
   ansi-styles@6.2.1: {}
 
+  any-promise@1.3.0: {}
+
   anymatch@3.1.3:
     dependencies:
       normalize-path: 3.0.0
       picomatch: 2.3.1
 
+  arg@5.0.2: {}
+
   argparse@1.0.10:
     dependencies:
       sprintf-js: 1.0.3
@@ -6675,10 +6714,6 @@ snapshots:
     dependencies:
       balanced-match: 1.0.0
 
-  braces@3.0.2:
-    dependencies:
-      fill-range: 7.1.1
-
   braces@3.0.3:
     dependencies:
       fill-range: 7.1.1
@@ -6725,6 +6760,8 @@ snapshots:
       pascal-case: 3.1.2
       tslib: 2.6.3
 
+  camelcase-css@2.0.1: {}
+
   camelcase@5.3.1: {}
 
   camelcase@6.2.0: {}
@@ -6747,10 +6784,10 @@ snapshots:
   chokidar@3.6.0:
     dependencies:
       anymatch: 3.1.3
-      braces: 3.0.2
+      braces: 3.0.3
       glob-parent: 5.1.2
       is-binary-path: 2.1.0
-      is-glob: 4.0.1
+      is-glob: 4.0.3
       normalize-path: 3.0.0
       readdirp: 3.6.0
     optionalDependencies:
@@ -6804,6 +6841,8 @@ snapshots:
 
   commander@2.20.3: {}
 
+  commander@4.1.1: {}
+
   commander@7.2.0: {}
 
   commander@8.3.0: {}
@@ -7002,12 +7041,16 @@ snapshots:
 
   detect-node@2.0.4: {}
 
+  didyoumean@1.2.2: {}
+
   diff-sequences@29.6.3: {}
 
   dir-glob@3.0.1:
     dependencies:
       path-type: 4.0.0
 
+  dlv@1.1.3: {}
+
   dns-packet@5.6.1:
     dependencies:
       '@leichtgewicht/ip-codec': 2.0.5
@@ -7620,7 +7663,7 @@ snapshots:
 
   glob-parent@5.1.2:
     dependencies:
-      is-glob: 4.0.1
+      is-glob: 4.0.3
 
   glob-parent@6.0.2:
     dependencies:
@@ -7797,7 +7840,7 @@ snapshots:
     dependencies:
       '@types/http-proxy': 1.17.14
       http-proxy: 1.18.1
-      is-glob: 4.0.1
+      is-glob: 4.0.3
       is-plain-obj: 3.0.0
       micromatch: 4.0.7
     optionalDependencies:
@@ -8481,6 +8524,10 @@ snapshots:
       prelude-ls: 1.2.1
       type-check: 0.4.0
 
+  lilconfig@2.1.0: {}
+
+  lilconfig@3.1.2: {}
+
   lines-and-columns@1.1.6: {}
 
   loader-runner@4.3.0: {}
@@ -8623,6 +8670,12 @@ snapshots:
       dns-packet: 5.6.1
       thunky: 1.1.0
 
+  mz@2.7.0:
+    dependencies:
+      any-promise: 1.3.0
+      object-assign: 4.1.1
+      thenify-all: 1.6.0
+
   nanoid@3.3.7: {}
 
   natural-compare@1.4.0: {}
@@ -8656,6 +8709,8 @@ snapshots:
 
   object-assign@4.1.1: {}
 
+  object-hash@3.0.0: {}
+
   object-inspect@1.13.1: {}
 
   object-keys@1.1.1: {}
@@ -8822,6 +8877,8 @@ snapshots:
 
   picomatch@2.3.1: {}
 
+  pify@2.3.0: {}
+
   pify@4.0.1: {}
 
   pirates@4.0.6: {}
@@ -8840,14 +8897,31 @@ snapshots:
 
   possible-typed-array-names@1.0.0: {}
 
-  postcss-custom-properties@13.3.10(postcss@8.4.38):
+  postcss-import@15.1.0(postcss@8.4.38):
     dependencies:
-      '@csstools/cascade-layer-name-parser': 1.0.11(@csstools/css-parser-algorithms@2.6.3(@csstools/css-tokenizer@2.3.1))(@csstools/css-tokenizer@2.3.1)
-      '@csstools/css-parser-algorithms': 2.6.3(@csstools/css-tokenizer@2.3.1)
-      '@csstools/css-tokenizer': 2.3.1
-      '@csstools/utilities': 1.0.0(postcss@8.4.38)
       postcss: 8.4.38
       postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.8
+
+  postcss-import@16.1.0(postcss@8.4.38):
+    dependencies:
+      postcss: 8.4.38
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.8
+
+  postcss-js@4.0.1(postcss@8.4.38):
+    dependencies:
+      camelcase-css: 2.0.1
+      postcss: 8.4.38
+
+  postcss-load-config@4.0.2(postcss@8.4.38):
+    dependencies:
+      lilconfig: 3.1.2
+      yaml: 2.4.5
+    optionalDependencies:
+      postcss: 8.4.38
 
   postcss-loader@8.1.1(postcss@8.4.38)(typescript@5.4.5)(webpack@5.91.0(webpack-cli@5.1.4)):
     dependencies:
@@ -8881,10 +8955,8 @@ snapshots:
       icss-utils: 5.1.0(postcss@8.4.38)
       postcss: 8.4.38
 
-  postcss-nesting@12.1.5(postcss@8.4.38):
+  postcss-nested@6.0.1(postcss@8.4.38):
     dependencies:
-      '@csstools/selector-resolve-nested': 1.1.0(postcss-selector-parser@6.1.0)
-      '@csstools/selector-specificity': 3.1.1(postcss-selector-parser@6.1.0)
       postcss: 8.4.38
       postcss-selector-parser: 6.1.0
 
@@ -9007,6 +9079,10 @@ snapshots:
     dependencies:
       loose-envify: 1.4.0
 
+  read-cache@1.0.0:
+    dependencies:
+      pify: 2.3.0
+
   readable-stream@2.3.7:
     dependencies:
       core-util-is: 1.0.2
@@ -9437,6 +9513,16 @@ snapshots:
     dependencies:
       webpack: 5.91.0(webpack-cli@5.1.4)
 
+  sucrase@3.35.0:
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.5
+      commander: 4.1.1
+      glob: 10.4.1
+      lines-and-columns: 1.1.6
+      mz: 2.7.0
+      pirates: 4.0.6
+      ts-interface-checker: 0.1.13
+
   supports-color@5.5.0:
     dependencies:
       has-flag: 3.0.0
@@ -9451,6 +9537,33 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  tailwindcss@3.4.4:
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      arg: 5.0.2
+      chokidar: 3.6.0
+      didyoumean: 1.2.2
+      dlv: 1.1.3
+      fast-glob: 3.3.2
+      glob-parent: 6.0.2
+      is-glob: 4.0.3
+      jiti: 1.21.3
+      lilconfig: 2.1.0
+      micromatch: 4.0.7
+      normalize-path: 3.0.0
+      object-hash: 3.0.0
+      picocolors: 1.0.1
+      postcss: 8.4.38
+      postcss-import: 15.1.0(postcss@8.4.38)
+      postcss-js: 4.0.1(postcss@8.4.38)
+      postcss-load-config: 4.0.2(postcss@8.4.38)
+      postcss-nested: 6.0.1(postcss@8.4.38)
+      postcss-selector-parser: 6.1.0
+      resolve: 1.22.8
+      sucrase: 3.35.0
+    transitivePeerDependencies:
+      - ts-node
+
   tapable@2.2.1: {}
 
   temp-dir@2.0.0: {}
@@ -9486,6 +9599,14 @@ snapshots:
 
   text-table@0.2.0: {}
 
+  thenify-all@1.6.0:
+    dependencies:
+      thenify: 3.3.1
+
+  thenify@3.3.1:
+    dependencies:
+      any-promise: 1.3.0
+
   thingies@1.21.0(tslib@2.6.3):
     dependencies:
       tslib: 2.6.3
@@ -9516,6 +9637,8 @@ snapshots:
     dependencies:
       typescript: 5.4.5
 
+  ts-interface-checker@0.1.13: {}
+
   ts-invariant@0.4.4:
     dependencies:
       tslib: 1.14.1
@@ -10025,6 +10148,8 @@ snapshots:
 
   yallist@3.1.1: {}
 
+  yaml@2.4.5: {}
+
   yargs-parser@21.1.1: {}
 
   yargs@17.7.2:
diff --git a/postcss.config.js b/postcss.config.js
index 2222917..26acb6a 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,7 +1,7 @@
 module.exports = {
   plugins: {
-    "postcss-nesting": {},
-    "postcss-custom-properties": {},
+    "postcss-import": {},
     autoprefixer: {},
+    tailwindcss: {},
   },
 };
diff --git a/src/app.tsx b/src/app.tsx
index 2fc7522..aeb2db6 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -13,6 +13,7 @@ import AppShell from "./components/AppShell";
 import i18n from "./i18n";
 import PrivacyProvider from "./context/PrivacyProvider";
 import {HelmetProvider} from "react-helmet-async";
+import './styles.css';
 
 if (process.env.NODE_ENV === "production") {
   if ("serviceWorker" in navigator) {
diff --git a/src/components/AppShell.css b/src/components/AppShell.css
deleted file mode 100644
index 10e3a6b..0000000
--- a/src/components/AppShell.css
+++ /dev/null
@@ -1,38 +0,0 @@
-@import "shared.css";
-
-#page-wrapper {
-  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  background-color: #f2f1f3;
-
-  @media (max-width: 48rem) {
-    flex-direction: column-reverse;
-  }
-}
-
-#page-body {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  overflow: auto;
-}
-
-header {
-  background-color: var(--header-bg-color);
-  display: flex;
-  flex: 0 0 3.5rem;
-  box-shadow: var(--shadow);
-
-  & h1 {
-    margin: 1rem;
-    color: var(--header-color);
-    font-size: 1.25rem;
-    line-height: 1.5rem;
-    flex-grow: 1;
-  }
-}
diff --git a/src/components/AppShell.tsx b/src/components/AppShell.tsx
index 90aa627..d8e4e97 100644
--- a/src/components/AppShell.tsx
+++ b/src/components/AppShell.tsx
@@ -5,15 +5,9 @@ import { Route, Routes, useLocation } from "react-router";
 import loadable from "@loadable/component";
 import Menu from "./Menu";
 import Loading from "./Loading";
-import "./AppShell.css";
 import LanguagePicker from "./LanguagePicker";
-import Item from "./Item";
 import TestDataProvider from "../context/TestDataProvider";
 import About from "./Info";
-import us from "../img/us.svg";
-import de from "../img/de.svg";
-import es from "../img/es.svg";
-import fr from "../img/fr.svg";
 import Tracking from "./Tracking";
 import useAnalytics from "../hooks/useAnalytics";
 
@@ -42,31 +36,14 @@ const AppShell: FunctionComponent = () => {
   }, [location]);
 
   return (
-    <div id="page-wrapper">
+    <div id="page-wrapper" className="font-sans flex fixed top-0 bottom-0 left-0 right-0 bg-grey-100 flex-col-reverse md:flex-row">
       <Helmet htmlAttributes={{ lang: i18n.language }} />
       <Menu />
-      <div id="page-body">
+      <div id="page-body" className="flex flex-col flex-grow overflow-auto">
         <Tracking />
-        <header>
-          <h1>{t("app.title")}</h1>
-          <LanguagePicker>
-            <Item code="en">
-              <img src={us} alt="English" />
-              <span>English</span>
-            </Item>
-            <Item code="de">
-              <img src={de} alt="Deutsch" />
-              <span>Deutsch</span>
-            </Item>
-            <Item code="fr">
-              <img src={fr} alt="Français" />
-              <span>Français</span>
-            </Item>
-            <Item code="es">
-              <img src={es} alt="Español" />
-              <span>Español</span>
-            </Item>
-          </LanguagePicker>
+        <header className="flex bg-blue-300 shadow basis-14">
+          <h1 className="mx-4 mt-4 mb-3 text-white text-xl grow">{t("app.title")}</h1>
+          <LanguagePicker />
         </header>
         <TestDataProvider>
           <Routes>
diff --git a/src/components/Box.tsx b/src/components/Box.tsx
new file mode 100644
index 0000000..e9a152d
--- /dev/null
+++ b/src/components/Box.tsx
@@ -0,0 +1,15 @@
+import React, {FunctionComponent, PropsWithChildren} from "react";
+import classnames from "classnames";
+
+interface Props {
+  className?: string;
+}
+
+const Box: FunctionComponent<PropsWithChildren<Props>> = ({ className, children}) => {
+  const classNames = classnames("bg-white shadow p-4 mt-4 mx-4", className);
+  return (
+    <div className={classNames}>{children}</div>
+  );
+}
+
+export default Box;
diff --git a/src/components/CheckBox.css b/src/components/CheckBox.css
deleted file mode 100644
index 3c633d9..0000000
--- a/src/components/CheckBox.css
+++ /dev/null
@@ -1,39 +0,0 @@
-@import "shared.css";
-
-.checkbox {
-  position: relative;
-  cursor: pointer;
-  user-select: none;
-  background-color: var(--white);
-  border: 0.1rem solid var(--darkblue2);
-  border-radius: 0.25rem;
-  box-sizing: border-box;
-  width: 1.25rem;
-  height: 1.25rem;
-
-  &[aria-checked=true] {
-    background-color: var(--darkblue2);
-  }
-
-  &:hover {
-    background-color: var(--blue2);
-  }
-
-  & input {
-    position: absolute;
-    opacity: 0;
-    height: 0;
-    width: 0;
-
-    &:checked ~ .checkmark {
-      display: block;
-    }
-  }
-
-  & .checkmark {
-    display: none;
-    position: absolute;
-    color: var(--white);
-    padding-left: 0.1rem;
-  }
-}
diff --git a/src/components/CheckBox.tsx b/src/components/CheckBox.tsx
index 4165b4c..0ec98a2 100644
--- a/src/components/CheckBox.tsx
+++ b/src/components/CheckBox.tsx
@@ -1,7 +1,6 @@
 import React, { FunctionComponent, KeyboardEvent } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCheck } from "@fortawesome/free-solid-svg-icons";
-import "./CheckBox.css";
 
 interface Props {
   checked: boolean;
@@ -24,7 +23,7 @@ const CheckBox: FunctionComponent<Props> = ({
 
   return (
     <div
-      className="checkbox"
+      className="checkbox relative select-none bg-white border border-blue-500 rounded w-5 h-5 box-border cursor-pointer hover:bg-blue-200 aria-checked:bg-blue-400"
       role="checkbox"
       aria-checked={checked}
       tabIndex={0}
@@ -33,12 +32,13 @@ const CheckBox: FunctionComponent<Props> = ({
     >
       <input
         type="checkbox"
+        className="absolute opacity-0 w-0 h-0 peer"
         checked={checked}
         onChange={onChange}
         readOnly={readOnly}
         aria-labelledby={labelledBy}
       />
-      <FontAwesomeIcon className="checkmark" icon={faCheck} />
+      <FontAwesomeIcon className="hidden absolute text-white pl-0.5 peer-checked:block" icon={faCheck} />
     </div>
   );
 };
diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
new file mode 100644
index 0000000..0f7a80e
--- /dev/null
+++ b/src/components/Dropdown.tsx
@@ -0,0 +1,99 @@
+import React, {
+  MouseEvent, KeyboardEvent, ReactElement, useState, PropsWithChildren,
+} from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faAngleDown } from "@fortawesome/free-solid-svg-icons";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import { ItemProps } from "./Item";
+
+interface Props<T> {
+  selected: T;
+  children: Array<ReactElement<ItemProps<T>>>;
+  onSelect: (code: T) => void;
+  type?: "header" | "regular"
+}
+
+function Dropdown<T>({
+  children, selected, onSelect, type = "regular",
+}: PropsWithChildren<Props<T>>) {
+  const [open, setOpen] = useState(false);
+  const { t } = useTranslation();
+
+  const handleTogglePopup = (event: MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    setOpen(!open);
+  };
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.keyCode === 32) {
+      setOpen(!open);
+    } else if (open) {
+      if (event.keyCode === 27 || event.keyCode === 9) {
+        setOpen(false);
+      } else {
+        return;
+      }
+    } else if (event.keyCode === 40) {
+      setOpen(true);
+    } else {
+      return;
+    }
+
+    event.preventDefault();
+  };
+
+  let content = null;
+  const items = React.Children.map(children, (item: ReactElement<ItemProps<T>>) => {
+    const isSelected = item.props.code === selected;
+    if (isSelected) {
+      content = item.props.children;
+    }
+
+    return React.cloneElement(item, {
+      type,
+      selected: isSelected,
+      onClick: () => onSelect(item.props.code),
+    });
+  });
+
+  const className = classNames("flex relative h-8 border border-blue-500 rounded-lg box-border cursor-pointer", {
+    "rounded-b-none": open,
+    "m-3 text-white bg-blue-400 hover:bg-blue-500": type === "header",
+    "text-black bg-white hover:bg-grey-100": type === "regular",
+  });
+
+  const popupClassName = classNames("absolute top-8 right-0 border border-blue-500 mt-[-2px] mr-[-1px] rounded-b min-w-full list-none z-10", {
+    block: open,
+    hidden: !open,
+    "bg-blue-500": type === "header",
+    "bg-white": type === "regular",
+  });
+
+  const contentClassName = classNames("flex-grow p-1 flex content-center");
+
+  return (
+    <div
+      className={className}
+      role="listbox"
+      aria-label={t("app.language")}
+      tabIndex={0}
+      onClick={handleTogglePopup}
+      onKeyDown={handleKeyDown}
+    >
+      <div className={contentClassName}>
+        {content}
+      </div>
+      <div className="flex text-2xl w-4 my-1 mx-2 text-blue-100">
+        <FontAwesomeIcon icon={faAngleDown} className="block" />
+      </div>
+      <ul className={popupClassName}>
+        {items}
+      </ul>
+    </div>
+  );
+}
+
+export default Dropdown;
diff --git a/src/components/HandballRules.css b/src/components/HandballRules.css
deleted file mode 100644
index b79c2f2..0000000
--- a/src/components/HandballRules.css
+++ /dev/null
@@ -1,9 +0,0 @@
-#rules {
-  display: flex;
-  height: 100%;
-  overflow: auto;
-
-  @media (max-width: 48rem) {
-    flex-direction: column;
-  }
-}
diff --git a/src/components/HandballRules.tsx b/src/components/HandballRules.tsx
index 012b380..9bd2747 100644
--- a/src/components/HandballRules.tsx
+++ b/src/components/HandballRules.tsx
@@ -1,58 +1,10 @@
-import React, { FunctionComponent } from "react";
-import "./HandballRules.css";
-import { useTranslation } from "react-i18next";
+import React from "react";
 import RulesSelector from "./RulesSelector";
-import Item from "./Item";
 import RulesText from "./rules/RulesText";
 
-interface RuleItemProps {
-  textKey: string;
-  className?: string;
-}
-
-const RulesItem: FunctionComponent<RuleItemProps> = ({ textKey, className }) => {
-  const { t } = useTranslation();
-  const name = t(textKey);
-  const href = name.toLowerCase().replace(/\s/g, "-").replace(/,/g, "");
-  return (
-    <Item code={textKey} className={className}>
-      <a href={`#${href}`}>
-        {name}
-      </a>
-    </Item>
-  );
-};
-
 const HandballRules = () => (
-  <div id="rules">
-    <RulesSelector>
-      <RulesItem textKey="rules.foreword" />
-      <RulesItem textKey="rules.rules" />
-      <RulesItem textKey="rules.rule.rule1" className="indent" />
-      <RulesItem textKey="rules.rule.rule2" className="indent" />
-      <RulesItem textKey="rules.rule.rule3" className="indent" />
-      <RulesItem textKey="rules.rule.rule4" className="indent" />
-      <RulesItem textKey="rules.rule.rule5" className="indent" />
-      <RulesItem textKey="rules.rule.rule6" className="indent" />
-      <RulesItem textKey="rules.rule.rule7" className="indent" />
-      <RulesItem textKey="rules.rule.rule8" className="indent" />
-      <RulesItem textKey="rules.rule.rule9" className="indent" />
-      <RulesItem textKey="rules.rule.rule10" className="indent" />
-      <RulesItem textKey="rules.rule.rule11" className="indent" />
-      <RulesItem textKey="rules.rule.rule12" className="indent" />
-      <RulesItem textKey="rules.rule.rule13" className="indent" />
-      <RulesItem textKey="rules.rule.rule14" className="indent" />
-      <RulesItem textKey="rules.rule.rule15" className="indent" />
-      <RulesItem textKey="rules.rule.rule16" className="indent" />
-      <RulesItem textKey="rules.rule.rule17" className="indent" />
-      <RulesItem textKey="rules.rule.rule18" className="indent" />
-      <RulesItem textKey="rules.hand-signals" />
-      <RulesItem textKey="rules.clarifications" />
-      <RulesItem textKey="rules.sar" />
-      <RulesItem textKey="rules.guidelines" />
-      <RulesItem textKey="rules.new-guidelines" />
-      <RulesItem textKey="rules.playing-court" />
-    </RulesSelector>
+  <div id="rules" className="flex h-full overflow-auto flex-col md:flex-row">
+    <RulesSelector />
     <RulesText />
   </div>
 );
diff --git a/src/components/Info.css b/src/components/Info.css
deleted file mode 100644
index 9125311..0000000
--- a/src/components/Info.css
+++ /dev/null
@@ -1,49 +0,0 @@
-#info-wrapper {
-  overflow: auto;
-}
-
-.info-box {
-  background-color: var(--white);
-  box-shadow: var(--shadow);
-  padding: 1rem;
-  margin: 1rem 1rem 0;
-
-  & h2 {
-    margin: 0;
-    padding: 0;
-    font-size: 1.25rem;
-  }
-
-  & h3 {
-    font-size: 1rem;
-  }
-}
-
-#info {
-  text-align: center;
-}
-
-#info-name {
-  font-weight: bold;
-  margin-top: 0.5rem;
-}
-
-#info-title {
-  font-size: 0.75rem;
-}
-
-#info-mail {
-  margin-top: 1rem;
-}
-
-.privacy-header {
-  display: flex;
-  margin-top: 1rem;
-  margin-bottom: 0.5rem;
-
-  & h3 {
-    margin: 0 0 0 0.5rem;
-    font-size: 1rem;
-    line-height: 1.25rem;
-  }
-}
diff --git a/src/components/Info.tsx b/src/components/Info.tsx
index 32bd2b9..6a10a46 100644
--- a/src/components/Info.tsx
+++ b/src/components/Info.tsx
@@ -1,8 +1,8 @@
 import React from "react";
-import "./Info.css";
 import CheckBox from "./CheckBox";
 import usePrivacySettings from "../hooks/usePrivacySettings";
 import { Decision } from "../context/PrivacyContext";
+import Box from "./Box";
 
 const Info = () => {
   const {
@@ -29,33 +29,33 @@ const Info = () => {
   };
 
   return (
-    <div id="info-wrapper" lang="en">
-      <div id="info" className="info-box">
+    <div className="overflow-auto" lang="en">
+      <Box className="text-center">
         <div>Website built by</div>
-        <div id="info-name">Christoph Kraemer</div>
-        <div id="info-title">USA Team Handball</div>
-        <div id="info-mail">Contact: hello@referee.app</div>
-      </div>
-      <div id="privacy-settings" className="info-box">
-        <h2>Privacy Settings</h2>
-        <div className="privacy-header">
+        <div className="font-bold mt-2">Christoph Kraemer</div>
+        <div className="text-xs">USA Team Handball</div>
+        <div className="mt-4">Contact: hello@referee.app</div>
+      </Box>
+      <Box>
+        <h2 className="text-xl font-bold">Privacy Settings</h2>
+        <div className="flex mt-4 mb-2">
           <CheckBox
             checked={allowTracking === Decision.ACCEPTED}
             onChange={handleTrackingChanged}
           />
-          <h3>Analytics</h3>
+          <h3 className="font-bold ml-2">Analytics</h3>
         </div>
         <div>
           We use Google Analytics to analyze traffic and optimize this website based on the data.
           We also collect data on which rules test questions were answered and if the answer was
           correct or wrong. More information can be found in the privacy policy below.
         </div>
-        <div className="privacy-header">
+        <div className="flex mt-4 mb-2">
           <CheckBox
             checked={allowReporting === Decision.ACCEPTED}
             onChange={handleReportingChanged}
           />
-          <h3>Error Reporting</h3>
+          <h3 className="font-bold ml-2">Error Reporting</h3>
         </div>
         <div>
           Not every website code is perfect. We use Sentry.io to collect errors which occur during
@@ -63,45 +63,45 @@ const Info = () => {
           reporting you help us to identify and fix potential errors quickly. More information can
           be found in the privacy policy below.
         </div>
-      </div>
-      <div className="info-box">
-        <h2>Privacy Policy</h2>
-        <p>
+      </Box>
+      <Box>
+        <h2 className="text-xl font-bold">Privacy Policy</h2>
+        <p className="my-4">
           We want you to understand how we collect, use and share information about you when you
           use this website. If you have any questions, please don’t hesitate to contact us at
           hello@referee.app.
         </p>
-        <h3>Overview</h3>
-        <p>
-          This website can be used free of charge without registering. We use your personal
+        <h3 className="font-bold">Overview</h3>
+        <p className="my-4">
+        This website can be used free of charge without registering. We use your personal
           information only for providing and improving this website. We only process usage data
           which can include your IP address, browser type and version, operating system, length of
           visit, page views and website navigation paths.
         </p>
-        <h3>Purpose of data collection</h3>
-        <p>
+        <h3 className="font-bold">Purpose of data collection</h3>
+        <p className="my-4">
           We collect this information to analyze how users interact with our website and how many
           users access our website.
         </p>
-        <h3>Cookies</h3>
-        <p>
-          Cookies are files with small amount of data, which may include an anonymous unique
+        <h3 className="font-bold">Cookies</h3>
+        <p className="my-4">
+        Cookies are files with small amount of data, which may include an anonymous unique
           identifier. Cookies are sent to your browser from a web site and stored on your
           computer&apos;s hard drive.
         </p>
-        <p>
+        <p className="my-4">
           We use cookies to gather statistics on the use of our services and evaluate them in
           order to optimize your experience. These cookies allow us to automatically recognize that
           you have visited our site before. The cookies are automatically deleted after a
           pre-defined period. Most browsers accept cookies automatically. However, you can disable
           cookies on your browser or choose to be notified when a new cookie is created.
         </p>
-        <p>
+        <p className="my-4">
           You can use this site without cookies.
         </p>
-        <h3>Sentry</h3>
-        <p>
-          We are constantly improving and developing our website to provide our users with the best
+        <h3 className="font-bold">Sentry</h3>
+        <p className="my-4">
+        We are constantly improving and developing our website to provide our users with the best
           possible user experience. However, not all malfunctions, such as those caused by
           programming errors, can be reliably ruled out from the start. Therefore, we use Sentry, an
           error tracking tool from Functional Software Inc., 132 Hawthorne St, San Francisco, CA
@@ -114,7 +114,7 @@ const Info = () => {
           <li>The IP address of the device</li>
           <li>Date and time of error</li>
         </ul>
-        <p>
+        <p className="my-4">
           There is no explicit analysis for advertising purposes in this process. The information is
           collected anonymously, is not used for personal reasons, and is subsequently deleted. This
           analysis helps us to continuously improve our website and fix hidden code errors. Such
@@ -122,12 +122,12 @@ const Info = () => {
           and analyzing errors. For more information on Sentry’s data processing and how it works,
           see Sentry’s privacy policy: https://sentry.io/privacy/
         </p>
-        <p>
+        <p className="my-4">
           You can object to the delivery of data to Sentry at any time by disabling the checkbox
           above.
         </p>
-        <h3>Google Analytics</h3>
-        <p>
+        <h3 className="font-bold">Google Analytics</h3>
+        <p className="my-4">
           For the continuous improvement of our Services we use the web analytics service Google
           Analytics of Google Inc., 1600 Amphitheatre Parkway, Mountain View, CA 94043, USA
           (hereinafter “Google”). Using cookies, Google creates pseudonymized user profiles. The
@@ -140,7 +140,7 @@ const Info = () => {
           <li>Host name of the accessing computer (IP address)</li>
           <li>Time of the server request</li>
         </ul>
-        <p>
+        <p className="my-4">
           This information is sent to a Google server in the U.S. and stored there. The
           information is used to evaluate the use of our services, to compile reports on the
           activities, and to provide other related services for purposes of market research and
@@ -149,14 +149,14 @@ const Info = () => {
           will your IP address be merged with any other Google data. The IP addresses are
           anonymized so that assignment is not possible (IP masking).
         </p>
-        <p>
+        <p className="my-4">
           We only send data to Google after you have explicitly agreed to it by clicking on
           “Accept” in the cookie banner or checking the checkbox above. You can find out more
           about Google&apos;s use of information by
           visiting https://www.google.com/policies/privacy/partners/
         </p>
-        <h3>Recipients outside the EU</h3>
-        <p>
+        <h3 className="font-bold">Recipients outside the EU</h3>
+        <p className="my-4">
           As indicated above, data may also be sent to recipients located outside the European
           Union or the European Economic Area. This applies in particular to the aforementioned
           processing of analysis technologies, which can result in data transmission to the
@@ -164,12 +164,12 @@ const Info = () => {
           the US. We only work with those service providers who are certified by the EU-US
           Privacy Shield.
         </p>
-        <h3>Your Rights</h3>
-        <p>
-          In addition to the right at any time to withdraw any consent you have given us, you
+        <h3 className="font-bold">Your Rights</h3>
+        <p className="my-4">
+        In addition to the right at any time to withdraw any consent you have given us, you
           are also entitled to the following if the respective legal conditions are met:
         </p>
-        <ul>
+        <ul className="my-4">
           <li>the right to access - you can ask for copies of your personal data</li>
           <li>
             the right to rectification - you can ask us to rectify inaccurate personal data
@@ -197,13 +197,13 @@ const Info = () => {
             processing of your personal data is consent, you can withdraw that consent.
           </li>
         </ul>
-        <h3>Data Security</h3>
-        <p>
+        <h3 className="font-bold">Data Security</h3>
+        <p className="my-4">
           We apply the highest standards to data security for our infrastructure and
           the processing of your data. For example, we use protection mechanisms for
           computers such as firewalls and data encryption.
         </p>
-        <p>
+        <p className="my-4">
           All personal data sent by you is also transmitted using the generally
           accepted and secure SSL (Secure Socket Layer) standard. SSL is a secure and
           proven standard, e.g. it is also used for online banking. You will recognize
@@ -211,7 +211,7 @@ const Info = () => {
           (i.e. https: // …) in the address bar of your browser, or with the lock
           icon at the bottom of the browser.
         </p>
-      </div>
+      </Box>
     </div>
   );
 };
diff --git a/src/components/Item.tsx b/src/components/Item.tsx
index 71b4b6b..5218f9f 100644
--- a/src/components/Item.tsx
+++ b/src/components/Item.tsx
@@ -1,27 +1,36 @@
-import React, { FunctionComponent, ReactNode } from "react";
+import React, { PropsWithChildren, ReactNode } from "react";
+import classNames from "classnames";
 
-export interface ItemProps {
-  code: string;
-  className?: string;
-  onClick?: () => void;
+export interface ItemProps<T> {
+  code: T; // eslint-disable-line react/no-unused-prop-types
+  type?: "header" | "regular"
   selected?: boolean;
+  onClick?: () => void;
   children: ReactNode;
+  className?: string;
 }
 
-const Item: FunctionComponent<ItemProps> = ({
+function Item<T>({
   selected,
+  type,
   children,
   onClick,
-  className,
-}) => (
-  <li
-    className={className}
-    role="option"
-    aria-selected={selected}
-    onClick={onClick}
-  >
-    {children}
-  </li>
-);
+  className: additionalClassName,
+}: PropsWithChildren<ItemProps<T>>) {
+  const className = classNames("flex p-1 content-center", {
+    "aria-selected:bg-blue-500 hover:bg-blue-200": type === "header",
+    "aria-selected:bg-grey-300 hover:bg-grey-400": type === "regular",
+  }, additionalClassName);
+  return (
+    <li
+      className={className}
+      role="option"
+      aria-selected={selected}
+      onClick={onClick}
+    >
+      {children}
+    </li>
+  );
+}
 
 export default Item;
diff --git a/src/components/LanguagePicker.css b/src/components/LanguagePicker.css
deleted file mode 100644
index 9874fa6..0000000
--- a/src/components/LanguagePicker.css
+++ /dev/null
@@ -1,99 +0,0 @@
-@import "shared.css";
-
-#language-picker {
-  display: flex;
-  position: relative;
-  margin: 0.75rem;
-  color: var(--white);
-  width: 10rem;
-  height: 2rem;
-  background-color: var(--darkblue2);
-  border-radius: 0.5rem;
-  border: 1px solid var(--darkblue1);
-  box-sizing: border-box;
-  cursor: pointer;
-
-  &.open {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-
-    & #picker-popup {
-      display: block;
-    }
-  }
-
-  &:hover {
-    background-color: var(--darkblue1);
-  }
-
-  @media (max-width: 48rem) {
-    width: 4.7rem;
-  }
-}
-
-#picker-content {
-  flex-grow: 1;
-
-  @media (max-width: 48rem) {
-    & img {
-      margin-right: 0;
-    }
-
-    & span {
-      display: none;
-    }
-  }
-}
-
-#picker-indicator {
-  display: flex;
-  font-size: 1.5rem;
-  width: 1rem;
-  margin: 0.25rem 0.5rem;
-  color: var(--blue3);
-
-  & svg {
-    display: block;
-  }
-}
-
-#picker-popup {
-  display: none;
-  position: absolute;
-  top: 2rem;
-  right: 0;
-  border: 1px solid var(--darkblue1);
-  background-color: var(--darkblue1);
-  margin-top: -2px;
-  margin-right: -1px;
-  padding: 0;
-  border-bottom-left-radius: 0.25rem;
-  border-bottom-right-radius: 0.25rem;
-  min-width: 100%;
-  list-style: none;
-  z-index: 5;
-
-  & li {
-    &[aria-selected=true] {
-      background-color: var(--darkblue1);
-    }
-
-    &:hover {
-      border-radius: 0.25rem;
-      background-color: var(--blue2);
-    }
-  }
-}
-
-#picker-popup img, #picker-content img {
-  height: 1.325rem;
-  border-radius: 0.25rem;
-  margin-right: 0.25rem;
-}
-
-#picker-popup li, #picker-content {
-  padding: 0.25rem;
-  line-height: 1.375rem;
-  display: flex;
-  align-content: center;
-}
diff --git a/src/components/LanguagePicker.tsx b/src/components/LanguagePicker.tsx
index 92ff65e..6badd28 100644
--- a/src/components/LanguagePicker.tsx
+++ b/src/components/LanguagePicker.tsx
@@ -1,21 +1,17 @@
 import React, {
-  FunctionComponent, MouseEvent, KeyboardEvent, ReactElement, useState,
+  FunctionComponent,
 } from "react";
-import "./LanguagePicker.css";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faAngleDown } from "@fortawesome/free-solid-svg-icons";
-import classNames from "classnames";
 import { useTranslation } from "react-i18next";
-import { ItemProps } from "./Item";
+import Item from "./Item";
 import useAnalytics from "../hooks/useAnalytics";
-
-interface Props {
-  children: Array<ReactElement<ItemProps>>;
-}
-
-const LanguagePicker: FunctionComponent<Props> = ({ children }) => {
-  const [open, setOpen] = useState(false);
-  const { t, i18n } = useTranslation();
+import Dropdown from "./Dropdown";
+import us from "../img/us.svg";
+import de from "../img/de.svg";
+import fr from "../img/fr.svg";
+import es from "../img/es.svg";
+
+const LanguagePicker: FunctionComponent = () => {
+  const { i18n } = useTranslation();
   const { trackEvent } = useAnalytics();
 
   const handleLanguageChange = async (lang: string) => {
@@ -26,69 +22,31 @@ const LanguagePicker: FunctionComponent<Props> = ({ children }) => {
     });
   };
 
-  const handleTogglePopup = (event: MouseEvent) => {
-    event.preventDefault();
-    event.stopPropagation();
-
-    setOpen(!open);
-  };
-
-  const handleKeyDown = (event: KeyboardEvent) => {
-    if (event.keyCode === 32) {
-      setOpen(!open);
-    } else if (open) {
-      if (event.keyCode === 27 || event.keyCode === 9) {
-        setOpen(false);
-      } else {
-        return;
-      }
-    } else if (event.keyCode === 40) {
-      setOpen(true);
-    } else {
-      return;
-    }
-
-    event.preventDefault();
-  };
-
-  let content = null;
   const currentLanguage = i18n.language;
-  const items = React.Children.map(children, (item: ReactElement<ItemProps>) => {
-    const isSelected = item.props.code === currentLanguage;
-    if (isSelected) {
-      content = item.props.children;
-    }
-
-    return React.cloneElement(item, {
-      selected: isSelected,
-      onClick: () => handleLanguageChange(item.props.code),
-    });
-  });
-
-  const className = classNames({
-    open,
-  });
 
   return (
-    <div
-      id="language-picker"
-      className={className}
-      role="listbox"
-      aria-label={t("app.language")}
-      tabIndex={0}
-      onClick={handleTogglePopup}
-      onKeyDown={handleKeyDown}
+    <Dropdown<string>
+      selected={currentLanguage}
+      onSelect={(newLang) => handleLanguageChange(newLang)}
+      type="header"
     >
-      <div id="picker-content">
-        {content}
-      </div>
-      <div id="picker-indicator">
-        <FontAwesomeIcon icon={faAngleDown} />
-      </div>
-      <ul id="picker-popup">
-        {items}
-      </ul>
-    </div>
+      <Item code="en">
+        <img src={us} alt="English" className="rounded mr-1 h-5" />
+        <span>English</span>
+      </Item>
+      <Item code="de">
+        <img src={de} alt="Deutsch" className="rounded mr-1 h-5" />
+        <span>Deutsch</span>
+      </Item>
+      <Item code="fr">
+        <img src={fr} alt="Français" className="rounded mr-1 h-5" />
+        <span>Français</span>
+      </Item>
+      <Item code="es">
+        <img src={es} alt="Español" className="rounded mr-1 h-5" />
+        <span>Español</span>
+      </Item>
+    </Dropdown>
   );
 };
 
diff --git a/src/components/Loading.css b/src/components/Loading.css
deleted file mode 100644
index 255d904..0000000
--- a/src/components/Loading.css
+++ /dev/null
@@ -1,103 +0,0 @@
-@import "shared.css";
-
-.spinner-wrapper {
-  padding: 3rem;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.spinner {
-  width: 5rem;
-  height: 5rem;
-  margin-bottom: 1rem;
-}
-
-.cls-1 {
-  fill: var(--white);
-}
-
-.cls-2 {
-  fill: var(--green1);
-}
-
-.cls-7 {
-  fill: var(--red1);
-}
-
-.cls-8 {
-  fill: var(--orange3);
-}
-
-.cls-10 {
-  fill: var(--red3);
-}
-
-.cls-12 {
-  fill: var(--blue2);
-}
-
-.cls-13 {
-  fill: var(--red2);
-}
-
-.cls-9 {
-  fill: var(--green3);
-}
-
-.cls-3 {
-  fill: var(--orange1);
-}
-
-.cls-6 {
-  fill: var(--orange2);
-}
-
-.cls-4 {
-  fill: var(--green2);
-}
-
-.cls-11 {
-  fill: var(--blue3);
-}
-
-.cls-5 {
-  fill: var(--blue1);
-}
-
-.anim {
-  animation: loading-animation 0.8s infinite ease-in-out;
-
-  &.anim1 {
-    animation-delay: 0s;
-  }
-
-  &.anim2 {
-    animation-delay: 0.1s;
-  }
-
-  &.anim3 {
-    animation-delay: 0.2s;
-  }
-
-  &.anim4 {
-    animation-delay: 0.4s;
-  }
-
-  &.anim5 {
-    animation-delay: 0.5s;
-  }
-
-  &.anim6 {
-    animation-delay: 0.6s;
-  }
-}
-
-@keyframes loading-animation {
-  0%, 40%, 100% {
-    opacity: 100%;
-  }
-  20% {
-    opacity: 0;
-  }
-}
diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
index 8f2eab0..d2e07f9 100644
--- a/src/components/Loading.tsx
+++ b/src/components/Loading.tsx
@@ -1,5 +1,4 @@
 import React, { FunctionComponent } from "react";
-import "./Loading.css";
 
 interface Props {
   error?: Error|null;
@@ -10,27 +9,27 @@ const Loading: FunctionComponent<Props> = ({ error = null }) => {
     console.log(error); // eslint-disable-line
   }
   return (
-    <div className="spinner-wrapper">
-      <svg viewBox="0 0 512 512" className="spinner">
-        <ellipse className="cls-1" cx="255.38" cy="256.5" rx="255.38" ry="252.5" />
-        <path className="cls-2" d="M244,200.09c2.1-.83,3.34.47,4.62,2.28q24.76,35.1,49.67,70.1c1.32,1.85,1.26,3.21.33,5.14q-18.43,38.7-36.69,77.5a4.54,4.54,0,0,1-4.3,3q-31.65,2.58-63.29,5.33c-7.77.66-15.54,1.29-23.29,2.08a4,4,0,0,1-4.27-2q-25.08-35.56-50.32-71a3.28,3.28,0,0,1-.37-3.84q18.74-39.36,37.3-78.79a3.61,3.61,0,0,1,3.44-2.37C185.75,205.08,214.71,202.59,244,200.09Z" />
-        <path className="anim anim2 cls-3" d="M310.47,268a6.9,6.9,0,0,1-1.94-1.51q-25.54-36-50.95-72a4.47,4.47,0,0,1-.38-3.58c9.3-24.17,18.73-48.29,28.07-72.45a3.25,3.25,0,0,1,3.35-2.38c24.71-1.24,49.41-2.57,74.12-3.84,3.44-.18,7.41-1.27,10.18,0s4.1,5.08,6,7.81q22.19,31.32,44.39,62.62a4.67,4.67,0,0,1,.61,5.16q-14.42,35-28.6,70.1a3.64,3.64,0,0,1-3.54,2.62q-40,3.58-79.93,7.31Z" />
-        <path className="anim anim4 cls-4" d="M328.6,417.15c-4.63,8.21-9.16,16.26-13.7,24.29-4.09,7.22-8.13,14.46-12.38,21.59a6.31,6.31,0,0,1-3.62,2.66c-28.6,6.49-57.24,12.84-85.85,19.28a4.06,4.06,0,0,1-4.09-1.12Q181.3,459,153.51,434.27a3.72,3.72,0,0,1-1.23-4.65q8.43-24.87,16.63-49.83c.64-1.94,1.58-2.61,3.63-2.78,29.25-2.43,58.49-5,87.74-7.4a6.86,6.86,0,0,1,4.23,1q31.38,22.61,62.64,45.37C327.53,416.27,327.89,416.58,328.6,417.15Z" />
-        <path className="anim anim6 cls-5" d="M52.81,299.48C49.4,292.33,46,285.3,42.7,278.26c-6.75-14.2-13.45-28.42-20.25-42.6a5,5,0,0,1,0-5q23.26-45,46.36-90a3.89,3.89,0,0,1,3.43-2.45q25.43-2.52,50.84-5.2c1.71-.18,2.36.39,2.79,2,5.91,21.75,11.9,43.49,17.8,65.26a5.11,5.11,0,0,1-.43,3.22Q124.2,243.89,105,284.27a4.32,4.32,0,0,1-2.27,2.26C86.16,290.9,69.6,295.15,52.81,299.48Z" />
-        <path className="anim anim3 cls-6" d="M393.66,272.28c1.31,6.86,2.63,13.65,3.91,20.44,3.65,19.44,7.26,38.89,11,58.31a4.14,4.14,0,0,1-1.85,4.78q-34.18,25.32-68.23,50.82c-1.6,1.2-2.61,1.17-4.21,0q-29.94-21.87-60-43.56c-1.7-1.22-2.08-2.14-1.13-4.13,12.21-25.63,24.3-51.31,36.52-76.92a4.59,4.59,0,0,1,3-2.35c26.33-2.55,52.67-5,79-7.39C392.23,272.23,392.8,272.28,393.66,272.28Z" />
-        <path className="cls-7" d="M502.65,273.14c-1.64,21.39-5.4,41.74-12.33,61.43-2.88,8.16-6.39,16.1-9.51,24.17-.81,2.1-1.95,2.5-4.15,2.12q-26.58-4.62-53.22-9c-2-.33-2.89-1.1-3.27-3.15-4.91-26.46-9.95-52.9-14.84-79.37a10.88,10.88,0,0,1,.57-5.73c9.47-23.49,19.1-46.92,28.59-70.4.82-2,1.73-2.65,4-2.43q15.07,1.49,30.2,2.56a4.51,4.51,0,0,1,4.55,3.33c9.43,24.53,19,49,28.48,73.51C502.14,271.36,502.46,272.54,502.65,273.14Z" />
-        <path className="cls-8" d="M206.93,64.78c2.17-5.68,4.26-11.19,6.38-16.68,4-10.3,7.9-20.62,12-30.87a4.44,4.44,0,0,1,2.92-2.41A249.09,249.09,0,0,1,348.52,31a12.8,12.8,0,0,1,6,4.63c7.4,10.2,14.93,20.3,22.31,30.51a5.09,5.09,0,0,1,.9,3.58c-1.91,9.31-4.05,18.58-6,27.89-.41,2-1.33,2.54-3.28,2.64-27.68,1.37-55.36,2.82-83,4.2a7.28,7.28,0,0,1-3.57-.7q-36.83-19-73.6-38.15C207.89,65.39,207.58,65.18,206.93,64.78Z" />
-        <path className="anim anim1 cls-9" d="M274.49,113.58c-4.93,12.66-9.81,25.16-14.69,37.66-4.43,11.36-8.92,22.69-13.25,34.08-.78,2.05-1.76,3-4.06,3.14-23.59,1.94-47.18,4-70.77,6-4.8.41-9.6.75-14.39,1.24-1.7.17-2.58-.18-3.07-2q-8.55-31.54-17.27-63a3.06,3.06,0,0,1,1.14-3.67q30.26-25.42,60.47-50.86a3.63,3.63,0,0,1,3.19-.54q36,18.51,71.84,37.24A6.8,6.8,0,0,1,274.49,113.58Z" />
-        <path className="cls-10" d="M314.29,466.62c4.55-8.06,9-15.94,13.43-23.81,4-7.13,8.06-14.28,12.19-21.37a12.45,12.45,0,0,1,3.16-3.58q36-26.92,72.19-53.71a5.46,5.46,0,0,1,3.6-1.13c17.84,2.93,35.66,6,53.49,9a10.66,10.66,0,0,1,1.34.47c-.51,1-.91,2-1.41,2.84q-39.12,68.94-111.36,102.92a5.67,5.67,0,0,1-3.5.52c-14-3.78-28-7.68-42-11.56A10.22,10.22,0,0,1,314.29,466.62Z" />
-        <path className="anim anim5 cls-11" d="M140.74,426.15c-2.87-1.19-5.61-2.3-8.33-3.45Q96.22,407.37,60,392.08a3.58,3.58,0,0,1-2.63-3.74q-.76-37.06-1.79-74.11c-.08-2.62.74-3.56,3.26-4.19,14.83-3.7,29.61-7.56,44.38-11.46,1.86-.49,2.91-.23,4.06,1.4Q132.35,335.53,157.5,371a4.3,4.3,0,0,1,.67,3.31c-5.48,16.72-11.08,33.4-16.66,50.09C141.34,425,141.06,425.44,140.74,426.15Z" />
-        <path className="cls-12" d="M212.46,17.14c-1.87,4.88-3.55,9.3-5.25,13.71-4,10.39-8,20.79-12.07,31.15a9.46,9.46,0,0,1-2.56,3.64q-31.79,26.92-63.68,53.69a7.51,7.51,0,0,1-3.81,1.61c-17.6,1.87-35.21,3.62-52.82,5.47a2.14,2.14,0,0,1-2.68-1.77c-1.9-6-3.84-12-5.89-17.89a3.75,3.75,0,0,1,.81-4.12A248.24,248.24,0,0,1,208.32,17.8C209.52,17.57,210.73,17.41,212.46,17.14Z" />
-        <path className="cls-13" d="M389.66,73.39l19.72,3.13c4.18.67,8.38,1.23,12.51,2.12a10.26,10.26,0,0,1,4.74,2.26,242.39,242.39,0,0,1,56.94,81.24,4.28,4.28,0,0,1-.45,4.68c-3,4.33-5.8,8.74-8.58,13.19a3.49,3.49,0,0,1-3.74,1.86c-11.3-1-22.62-1.89-33.93-3a4.68,4.68,0,0,1-2.95-1.77q-25.25-35.46-50.32-71a4.57,4.57,0,0,1-.89-3.08c2.05-9.67,4.25-19.31,6.42-29C389.17,73.93,389.35,73.8,389.66,73.39Z" />
-        <path className="cls-8" d="M58.62,404.27l37.8,16q21.48,9.09,43,18.23a11.72,11.72,0,0,1,3.2,1.86q30,26.76,59.93,53.59c.48.43.91.93,1.43,1.47-10.09,1.32-57.74-17.65-80.72-32C95.61,446.1,72.69,423.47,58.62,404.27Z" />
-        <path className="cls-3" d="M9.76,236.59c3.38,7.08,6.42,13.42,9.44,19.78Q31,281.15,42.68,306a8.53,8.53,0,0,1,.89,3.24q.95,36.49,1.79,73a4.07,4.07,0,0,1-.42,1.91,229,229,0,0,1-26.66-59.05C9,293.81,6.86,259.38,9.76,236.59Z" />
-        <path className="cls-11" d="M213,497.08c5.84-1.34,11.67-2.71,17.52-4q36-8,72-16a8.15,8.15,0,0,1,3.64-.07c10.76,2.9,21.49,5.89,32.23,8.87.52.14,1,.35,2.32.8C298.61,501.44,256.34,505.09,213,497.08Z" />
-        <path className="cls-6" d="M54.41,116.48c1.69,5.18,3.31,10,4.82,15a3.52,3.52,0,0,1-.26,2.4Q35.28,180,11.51,226.1a2.06,2.06,0,0,1-.38.41C7.39,209.21,37,133.62,54.41,116.48Z" />
-        <path className="cls-11" d="M489.76,178.4a219.38,219.38,0,0,1,12,58.73c-.39-.83-.82-1.64-1.15-2.48C495,220.11,489.32,205.59,483.78,191a5.21,5.21,0,0,1,.32-3.87C485.64,184.33,487.57,181.73,489.76,178.4Z" />
-        <path className="cls-11" d="M405.8,64c-5.58-.91-11.17-1.79-16.74-2.77a3.22,3.22,0,0,1-1.83-1.2C383.39,55,379.62,49.81,376,44.44A152.85,152.85,0,0,1,405.8,64Z" />
+    <div className="spinner-wrapper flex flex-col items-center p-12">
+      <svg viewBox="0 0 512 512" className="spinner w-20 h-20 mb-4">
+        <ellipse className="fill-white" cx="255.38" cy="256.5" rx="255.38" ry="252.5" />
+        <path className="fill-green-300" d="M244,200.09c2.1-.83,3.34.47,4.62,2.28q24.76,35.1,49.67,70.1c1.32,1.85,1.26,3.21.33,5.14q-18.43,38.7-36.69,77.5a4.54,4.54,0,0,1-4.3,3q-31.65,2.58-63.29,5.33c-7.77.66-15.54,1.29-23.29,2.08a4,4,0,0,1-4.27-2q-25.08-35.56-50.32-71a3.28,3.28,0,0,1-.37-3.84q18.74-39.36,37.3-78.79a3.61,3.61,0,0,1,3.44-2.37C185.75,205.08,214.71,202.59,244,200.09Z" />
+        <path className="animate-loading animation-delay-100 fill-orange-300" d="M310.47,268a6.9,6.9,0,0,1-1.94-1.51q-25.54-36-50.95-72a4.47,4.47,0,0,1-.38-3.58c9.3-24.17,18.73-48.29,28.07-72.45a3.25,3.25,0,0,1,3.35-2.38c24.71-1.24,49.41-2.57,74.12-3.84,3.44-.18,7.41-1.27,10.18,0s4.1,5.08,6,7.81q22.19,31.32,44.39,62.62a4.67,4.67,0,0,1,.61,5.16q-14.42,35-28.6,70.1a3.64,3.64,0,0,1-3.54,2.62q-40,3.58-79.93,7.31Z" />
+        <path className="animate-loading animation-delay-[400ms] fill-green-200" d="M328.6,417.15c-4.63,8.21-9.16,16.26-13.7,24.29-4.09,7.22-8.13,14.46-12.38,21.59a6.31,6.31,0,0,1-3.62,2.66c-28.6,6.49-57.24,12.84-85.85,19.28a4.06,4.06,0,0,1-4.09-1.12Q181.3,459,153.51,434.27a3.72,3.72,0,0,1-1.23-4.65q8.43-24.87,16.63-49.83c.64-1.94,1.58-2.61,3.63-2.78,29.25-2.43,58.49-5,87.74-7.4a6.86,6.86,0,0,1,4.23,1q31.38,22.61,62.64,45.37C327.53,416.27,327.89,416.58,328.6,417.15Z" />
+        <path className="animate-loading animation-delay-[600ms] fill-blue-300" d="M52.81,299.48C49.4,292.33,46,285.3,42.7,278.26c-6.75-14.2-13.45-28.42-20.25-42.6a5,5,0,0,1,0-5q23.26-45,46.36-90a3.89,3.89,0,0,1,3.43-2.45q25.43-2.52,50.84-5.2c1.71-.18,2.36.39,2.79,2,5.91,21.75,11.9,43.49,17.8,65.26a5.11,5.11,0,0,1-.43,3.22Q124.2,243.89,105,284.27a4.32,4.32,0,0,1-2.27,2.26C86.16,290.9,69.6,295.15,52.81,299.48Z" />
+        <path className="animate-loading animation-delay-200 fill-organge-200" d="M393.66,272.28c1.31,6.86,2.63,13.65,3.91,20.44,3.65,19.44,7.26,38.89,11,58.31a4.14,4.14,0,0,1-1.85,4.78q-34.18,25.32-68.23,50.82c-1.6,1.2-2.61,1.17-4.21,0q-29.94-21.87-60-43.56c-1.7-1.22-2.08-2.14-1.13-4.13,12.21-25.63,24.3-51.31,36.52-76.92a4.59,4.59,0,0,1,3-2.35c26.33-2.55,52.67-5,79-7.39C392.23,272.23,392.8,272.28,393.66,272.28Z" />
+        <path className="fill-red-300" d="M502.65,273.14c-1.64,21.39-5.4,41.74-12.33,61.43-2.88,8.16-6.39,16.1-9.51,24.17-.81,2.1-1.95,2.5-4.15,2.12q-26.58-4.62-53.22-9c-2-.33-2.89-1.1-3.27-3.15-4.91-26.46-9.95-52.9-14.84-79.37a10.88,10.88,0,0,1,.57-5.73c9.47-23.49,19.1-46.92,28.59-70.4.82-2,1.73-2.65,4-2.43q15.07,1.49,30.2,2.56a4.51,4.51,0,0,1,4.55,3.33c9.43,24.53,19,49,28.48,73.51C502.14,271.36,502.46,272.54,502.65,273.14Z" />
+        <path className="fill-orange-100" d="M206.93,64.78c2.17-5.68,4.26-11.19,6.38-16.68,4-10.3,7.9-20.62,12-30.87a4.44,4.44,0,0,1,2.92-2.41A249.09,249.09,0,0,1,348.52,31a12.8,12.8,0,0,1,6,4.63c7.4,10.2,14.93,20.3,22.31,30.51a5.09,5.09,0,0,1,.9,3.58c-1.91,9.31-4.05,18.58-6,27.89-.41,2-1.33,2.54-3.28,2.64-27.68,1.37-55.36,2.82-83,4.2a7.28,7.28,0,0,1-3.57-.7q-36.83-19-73.6-38.15C207.89,65.39,207.58,65.18,206.93,64.78Z" />
+        <path className="animate-loading animation-delay-0 fill-green-100" d="M274.49,113.58c-4.93,12.66-9.81,25.16-14.69,37.66-4.43,11.36-8.92,22.69-13.25,34.08-.78,2.05-1.76,3-4.06,3.14-23.59,1.94-47.18,4-70.77,6-4.8.41-9.6.75-14.39,1.24-1.7.17-2.58-.18-3.07-2q-8.55-31.54-17.27-63a3.06,3.06,0,0,1,1.14-3.67q30.26-25.42,60.47-50.86a3.63,3.63,0,0,1,3.19-.54q36,18.51,71.84,37.24A6.8,6.8,0,0,1,274.49,113.58Z" />
+        <path className="fill-red-100" d="M314.29,466.62c4.55-8.06,9-15.94,13.43-23.81,4-7.13,8.06-14.28,12.19-21.37a12.45,12.45,0,0,1,3.16-3.58q36-26.92,72.19-53.71a5.46,5.46,0,0,1,3.6-1.13c17.84,2.93,35.66,6,53.49,9a10.66,10.66,0,0,1,1.34.47c-.51,1-.91,2-1.41,2.84q-39.12,68.94-111.36,102.92a5.67,5.67,0,0,1-3.5.52c-14-3.78-28-7.68-42-11.56A10.22,10.22,0,0,1,314.29,466.62Z" />
+        <path className="animate-loading animation-delay-500 fill-blue-100" d="M140.74,426.15c-2.87-1.19-5.61-2.3-8.33-3.45Q96.22,407.37,60,392.08a3.58,3.58,0,0,1-2.63-3.74q-.76-37.06-1.79-74.11c-.08-2.62.74-3.56,3.26-4.19,14.83-3.7,29.61-7.56,44.38-11.46,1.86-.49,2.91-.23,4.06,1.4Q132.35,335.53,157.5,371a4.3,4.3,0,0,1,.67,3.31c-5.48,16.72-11.08,33.4-16.66,50.09C141.34,425,141.06,425.44,140.74,426.15Z" />
+        <path className="fill-blue-200" d="M212.46,17.14c-1.87,4.88-3.55,9.3-5.25,13.71-4,10.39-8,20.79-12.07,31.15a9.46,9.46,0,0,1-2.56,3.64q-31.79,26.92-63.68,53.69a7.51,7.51,0,0,1-3.81,1.61c-17.6,1.87-35.21,3.62-52.82,5.47a2.14,2.14,0,0,1-2.68-1.77c-1.9-6-3.84-12-5.89-17.89a3.75,3.75,0,0,1,.81-4.12A248.24,248.24,0,0,1,208.32,17.8C209.52,17.57,210.73,17.41,212.46,17.14Z" />
+        <path className="fill-red-200" d="M389.66,73.39l19.72,3.13c4.18.67,8.38,1.23,12.51,2.12a10.26,10.26,0,0,1,4.74,2.26,242.39,242.39,0,0,1,56.94,81.24,4.28,4.28,0,0,1-.45,4.68c-3,4.33-5.8,8.74-8.58,13.19a3.49,3.49,0,0,1-3.74,1.86c-11.3-1-22.62-1.89-33.93-3a4.68,4.68,0,0,1-2.95-1.77q-25.25-35.46-50.32-71a4.57,4.57,0,0,1-.89-3.08c2.05-9.67,4.25-19.31,6.42-29C389.17,73.93,389.35,73.8,389.66,73.39Z" />
+        <path className="fill-orange-100" d="M58.62,404.27l37.8,16q21.48,9.09,43,18.23a11.72,11.72,0,0,1,3.2,1.86q30,26.76,59.93,53.59c.48.43.91.93,1.43,1.47-10.09,1.32-57.74-17.65-80.72-32C95.61,446.1,72.69,423.47,58.62,404.27Z" />
+        <path className="fill-orange-300" d="M9.76,236.59c3.38,7.08,6.42,13.42,9.44,19.78Q31,281.15,42.68,306a8.53,8.53,0,0,1,.89,3.24q.95,36.49,1.79,73a4.07,4.07,0,0,1-.42,1.91,229,229,0,0,1-26.66-59.05C9,293.81,6.86,259.38,9.76,236.59Z" />
+        <path className="fill-blue-100" d="M213,497.08c5.84-1.34,11.67-2.71,17.52-4q36-8,72-16a8.15,8.15,0,0,1,3.64-.07c10.76,2.9,21.49,5.89,32.23,8.87.52.14,1,.35,2.32.8C298.61,501.44,256.34,505.09,213,497.08Z" />
+        <path className="fill-organge-200" d="M54.41,116.48c1.69,5.18,3.31,10,4.82,15a3.52,3.52,0,0,1-.26,2.4Q35.28,180,11.51,226.1a2.06,2.06,0,0,1-.38.41C7.39,209.21,37,133.62,54.41,116.48Z" />
+        <path className="fill-blue-100" d="M489.76,178.4a219.38,219.38,0,0,1,12,58.73c-.39-.83-.82-1.64-1.15-2.48C495,220.11,489.32,205.59,483.78,191a5.21,5.21,0,0,1,.32-3.87C485.64,184.33,487.57,181.73,489.76,178.4Z" />
+        <path className="fill-blue-100" d="M405.8,64c-5.58-.91-11.17-1.79-16.74-2.77a3.22,3.22,0,0,1-1.83-1.2C383.39,55,379.62,49.81,376,44.44A152.85,152.85,0,0,1,405.8,64Z" />
       </svg>
       Loading...
     </div>
diff --git a/src/components/Menu.css b/src/components/Menu.css
deleted file mode 100644
index 0165b40..0000000
--- a/src/components/Menu.css
+++ /dev/null
@@ -1,108 +0,0 @@
-#menu {
-  display: flex;
-  flex-direction: column;
-  background-color: var(--darkblue1);
-  width: 3.5rem;
-  min-width: 3.5rem;
-  transition: min-width 400ms;
-  box-shadow: var(--shadow);
-
-  @media (max-width: 48rem) {
-    width: 100%;
-    flex-direction: row;
-    flex: 0 0 3.5rem;
-  }
-
-  &.open {
-    min-width: 12rem;
-  }
-
-  & nav {
-    display: flex;
-    flex-direction: column;
-    font-size: 0.75rem;
-    flex: 0 0 3.5rem;
-
-    @media (max-width: 48rem) {
-      flex-direction: row;
-    }
-
-    & a {
-      &.active {
-        background-color: var(--blue3);
-      }
-
-      &:hover {
-        background-color: var(--blue2);
-      }
-    }
-  }
-
-  & .icon {
-    width: 3.5rem;
-    text-align: center;
-    display: inline-block;
-
-    @media (max-width: 48rem) {
-      width: 2.5rem;
-    }
-  }
-
-  & .text {
-    display: inline-block;
-
-    @media (max-width: 48rem) {
-      position: absolute;
-      visibility: hidden;
-    }
-  }
-}
-
-#logo {
-  display: flex;
-  padding: 0.5rem;
-  justify-content: flex-end;
-  background-color: var(--blue1);
-
-  & img {
-    width: 2.5rem;
-    height: 2.5rem;
-  }
-}
-
-#menu nav a, #menu-footer button {
-  color: var(--white);
-  padding: 0.625rem 0;
-  white-space:nowrap;
-  overflow: hidden;
-  flex: 0 0 1rem;
-
-  @media (max-width: 48rem) {
-    padding: 0 0.625rem;
-    flex-basis: 2.5rem;
-    text-align: center;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
-}
-
-#menu-spacer {
-  flex-grow: 1;
-}
-
-#menu-footer button {
-  border: 0;
-  background-color: transparent;
-
-  & svg {
-    transition: 400ms;
-  }
-}
-
-@media (max-width: 48rem) {
-  #menu-spacer, #menu-footer {
-    display: none;
-  }
-}
diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx
index 56ca62e..29bcca5 100644
--- a/src/components/Menu.tsx
+++ b/src/components/Menu.tsx
@@ -7,7 +7,22 @@ import {
   faArrowAltCircleRight, faBookOpen, faChartArea, faInfoCircle, faTasks,
 } from "@fortawesome/free-solid-svg-icons";
 import Logo from "../static/logo57.png";
-import "./Menu.css";
+import {IconProp} from "@fortawesome/fontawesome-svg-core";
+
+interface MenuItemProps {
+  to: string;
+  text: string;
+  icon: IconProp;
+}
+
+const MenuItem: FunctionComponent<MenuItemProps> = ({icon ,text, to}) => {
+  return (
+    <NavLink to={to} className={({isActive}) => classNames("hover:bg-blue-200 text-white whitespace-nowrap flex flex-grow-0 basis-14 md:basis-9 overflow-hidden", {"bg-blue-100": isActive})}>
+      <div className="min-w-14 w-14 text-center py-5 md:py-2.5"><FontAwesomeIcon icon={icon} size="lg" /></div>
+      <div className="invisible md:visible text-sm py-2">{text}</div>
+    </NavLink>
+  )
+}
 
 const Menu: FunctionComponent = () => {
   const [open, setOpen] = useState(false);
@@ -19,40 +34,26 @@ const Menu: FunctionComponent = () => {
     setOpen(!open);
   };
 
-  const className = classNames({
-    open,
+  const className = classNames("flex flex-row md:flex-col bg-blue-500 w-full md:w-14 min-w-14 shadow transition-all transition-duration-300", {
+    'min-w-48': open,
   });
   const rotation = open ? 180 : undefined;
 
   return (
     <div id="menu" className={className}>
-      <div id="logo">
-        <img src={Logo} alt={t("app.title")} />
+      <div id="logo" className="flex justify-end p-2 bg-blue-300 h-14">
+        <img className="h-10 w-10" src={Logo} alt={t("app.title")} />
       </div>
-      <nav>
-        <NavLink to="/" end>
-          <div className="icon"><FontAwesomeIcon icon={faTasks} size="lg" /></div>
-          <div className="text">{t("menu.test")}</div>
-        </NavLink>
-        <NavLink to="/rules">
-          <div className="icon"><FontAwesomeIcon icon={faBookOpen} size="lg" /></div>
-          <div className="text">{t("menu.rules")}</div>
-        </NavLink>
-        <NavLink to="/stats">
-          <div className="icon"><FontAwesomeIcon icon={faChartArea} size="lg" /></div>
-          <div className="text">{t("menu.stats")}</div>
-        </NavLink>
-        <NavLink to="/about">
-          <div className="icon"><FontAwesomeIcon icon={faInfoCircle} size="lg" /></div>
-          <div className="text">{t("menu.about")}</div>
-        </NavLink>
+      <nav className="flex flex-row md:flex-col text-xs">
+        <MenuItem to="/" text={t("menu.test")} icon={faTasks} />
+        <MenuItem to="/rules" text={t("menu.rules")} icon={faBookOpen} />
+        <MenuItem to="/stats" text={t("menu.stats")} icon={faChartArea} />
+        <MenuItem to="/about" text={t("menu.about")} icon={faInfoCircle} />
       </nav>
-      <div id="menu-spacer" />
-      <div id="menu-footer">
+      <div className="hidden md:block flex-grow" />
+      <div className="hidden md:block basis-9" id="menu-footer">
         <button type="button" onClick={handleToggleOpen} aria-pressed={open} aria-label={t("app.toggle-menu")}>
-          <div className="icon">
-            <FontAwesomeIcon icon={faArrowAltCircleRight} size="lg" rotation={rotation} />
-          </div>
+          <FontAwesomeIcon className="w-14 min-w-14 text-white duration-300" icon={faArrowAltCircleRight} size="lg" rotation={rotation} />
         </button>
       </div>
     </div>
diff --git a/src/components/RulesSelector.css b/src/components/RulesSelector.css
deleted file mode 100644
index 885f376..0000000
--- a/src/components/RulesSelector.css
+++ /dev/null
@@ -1,101 +0,0 @@
-#rules-selector-wrapper {
-  background-color: var(--grey1);
-  box-shadow: var(--shadow);
-  flex: 0 0 15rem;
-  overflow: auto;
-
-  @media (max-width: 48rem) {
-    flex: 0 0 3.5rem;
-    overflow: visible;
-  }
-}
-
-#selector-popup {
-  list-style: none;
-  margin: 0rem;
-  padding: 0;
-
-  @media (max-width: 48rem) {
-    display: none;
-    position: absolute;
-    background-color: var(--grey1);
-    top: 2rem;
-    right: 0;
-    border: 1px solid var(--darkblue1);
-    margin-top: -2px;
-    margin-right: -1px;
-    width: 100%;
-    max-height: 15rem;
-    z-index: 5;
-    overflow: scroll;
-  }
-
-  & a {
-    display: block;
-    color: var(--black);
-    padding: 0.25rem 0.5rem;
-    line-height: 1.375rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    text-decoration: none;
-  }
-
-  & li {
-    &:hover {
-      background-color: var(--grey2);
-    }
-
-    &.indent {
-      padding-left: 1.5rem;
-    }
-  }
-}
-
-#selector-indicator {
-  display: none;
-  font-size: 1.5rem;
-  width: 1rem;
-  margin: 0 0.5rem;
-
-  @media (max-width: 48rem) {
-    display: flex;
-  }
-
-  & svg {
-    display: block;
-    height: 1.875rem;
-  }
-}
-
-#selector-content {
-  display: none;
-  flex-grow: 1;
-  padding: 0.25rem;
-  line-height: 1.375rem;
-
-  @media (max-width: 48rem) {
-    display: block;
-  }
-}
-
-@media (max-width: 48rem) {
-  #rules-selector {
-    position: relative;
-    display: flex;
-    border-radius: 0.5rem;
-    border: 1px solid var(--darkblue1);
-    height: 2rem;
-    margin: 0.75rem;
-    box-sizing: border-box;
-
-    &.open {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-
-      & #selector-popup {
-        display: block;
-      }
-    }
-  }
-}
diff --git a/src/components/RulesSelector.tsx b/src/components/RulesSelector.tsx
index df6a8b7..0f523c8 100644
--- a/src/components/RulesSelector.tsx
+++ b/src/components/RulesSelector.tsx
@@ -1,16 +1,29 @@
-import React, { FunctionComponent, ReactElement, useState } from "react";
+import React, { FunctionComponent, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { faAngleDown } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classNames from "classnames";
-import { ItemProps } from "./Item";
-import "./RulesSelector.css";
+import Item from "./Item";
 
-interface Props {
-  children: Array<ReactElement<ItemProps>>;
+interface RuleItemProps {
+  textKey: string;
+  className?: string;
 }
 
-const RulesSelector: FunctionComponent<Props> = ({ children }) => {
+const RulesItem: FunctionComponent<RuleItemProps> = ({ textKey, className }) => {
+  const { t } = useTranslation();
+  const name = t(textKey);
+  const href = name.toLowerCase().replace(/\s/g, "-").replace(/,/g, "");
+  return (
+    <Item<string> code={textKey} className={className}>
+      <a href={`#${href}`} className="block text-black py-1 px-2 whitespace-nowrap overflow-hidden overflow-ellipsis no-underline">
+        {name}
+      </a>
+    </Item>
+  );
+};
+
+const RulesSelector: FunctionComponent = () => {
   const [open, setOpen] = useState(false);
   const { t } = useTranslation();
 
@@ -18,27 +31,55 @@ const RulesSelector: FunctionComponent<Props> = ({ children }) => {
     setOpen(!open);
   };
 
-  const className = classNames({
-    open,
+  const className = classNames("relative flex rounded-lg border md:border-0 border-blue-500 w-full h-8 md:h-full m-3 md:m-0 box-border", {
+    "rounded-b-none": open,
+  });
+  const popupClassName = classNames("md:block list-none absolute md:relative bg-grey-200 top-8 md:top-0 right-0 border md:border-0 border-blue-500 mt-[-2px] mr-[-1px] w-full max-h-60 md:max-h-none md:h-full z-10 overflow-scroll", {
+    block: open,
+    hidden: !open,
   });
 
   return (
-    <aside id="rules-selector-wrapper">
+    <aside id="rules-selector-wrapper" className="bg-grey-200 shadow flex flex-grow-0 shrink-0 basis-60 overflow-auto">
       <div
-        id="rules-selector"
         className={className}
         role="listbox"
         tabIndex={0}
         onClick={handleTogglePopup}
       >
-        <div id="selector-content">
+        <div className="block flex-grow p-1 md:hidden">
           {t("app.quicknav")}
         </div>
-        <div id="selector-indicator">
-          <FontAwesomeIcon icon={faAngleDown} />
+        <div id="selector-indicator" className="flex md:hidden text-2xl w-4 my-1 mx-2">
+          <FontAwesomeIcon icon={faAngleDown} className="block" />
         </div>
-        <ul id="selector-popup">
-          {children}
+        <ul id="selector-popup" className={popupClassName}>
+          <RulesItem textKey="rules.foreword" />
+          <RulesItem textKey="rules.rules" />
+          <RulesItem textKey="rules.rule.rule1" className="pl-6" />
+          <RulesItem textKey="rules.rule.rule2" className="pl-6" />
+          <RulesItem textKey="rules.rule.rule3" className="pl-6" />
+          <RulesItem textKey="rules.rule.rule4" className="pl-6" />
+          <RulesItem textKey="rules.rule.rule5" className="pl-6" />
+          <RulesItem textKey="rules.rule.rule6" className="pl-6" />
+          <RulesItem textKey="rules.rule.rule7" className="pl-6" />
+          <RulesItem textKey="rules.rule.rule8" className="pl-6" />
+          <RulesItem textKey="rules.rule.rule9" className="pl-6" />
+          <RulesItem textKey="rules.rule.rule10" className="pl-6" />
+          <RulesItem textKey="rules.rule.rule11" className="pl-6" />
+          <RulesItem textKey="rules.rule.rule12" className="pl-6" />
+          <RulesItem textKey="rules.rule.rule13" className="pl-6" />
+          <RulesItem textKey="rules.rule.rule14" className="pl-6" />
+          <RulesItem textKey="rules.rule.rule15" className="pl-6" />
+          <RulesItem textKey="rules.rule.rule16" className="pl-6" />
+          <RulesItem textKey="rules.rule.rule17" className="pl-6" />
+          <RulesItem textKey="rules.rule.rule18" className="pl-6" />
+          <RulesItem textKey="rules.hand-signals" />
+          <RulesItem textKey="rules.clarifications" />
+          <RulesItem textKey="rules.sar" />
+          <RulesItem textKey="rules.guidelines" />
+          <RulesItem textKey="rules.new-guidelines" />
+          <RulesItem textKey="rules.playing-court" />
         </ul>
       </div>
     </aside>
diff --git a/src/components/Tracking.css b/src/components/Tracking.css
deleted file mode 100644
index 67fde8c..0000000
--- a/src/components/Tracking.css
+++ /dev/null
@@ -1,50 +0,0 @@
-#tracking {
-  background-color: var(--blue3);
-  border-bottom: 1px solid var(--darkblue1);
-  display: flex;
-
-  @media (max-width: 48rem) {
-    flex-direction: column;
-    flex: 0 0 8rem;
-  }
-}
-
-#tracking-text {
-  padding: 0.5rem;
-  font-size: 0.75rem;
-
-  & a {
-    color: var(--white);
-  }
-}
-
-#tracking-buttons {
-  display: flex;
-  padding: 0.5rem;
-
-  & button {
-    font-size: 1rem;
-    border-radius: 0.5rem;
-    height: 2rem;
-    line-height: 2rem;
-    box-sizing: border-box;
-    width: 7rem;
-
-    @media (max-width: 48rem) {
-      width: 50%;
-    }
-  }
-}
-
-#accept-button {
-  background-color: var(--green3);
-  border: 1px solid var(--green1);
-  color: var(--black);
-  margin-right: 0.5rem;
-}
-
-#decline-button {
-  background-color: var(--darkblue2);
-  border: 1px solid var(--darkblue1);
-  color: var(--white);
-}
diff --git a/src/components/Tracking.tsx b/src/components/Tracking.tsx
index db7425b..d496950 100644
--- a/src/components/Tracking.tsx
+++ b/src/components/Tracking.tsx
@@ -1,5 +1,4 @@
 import React, { FunctionComponent } from "react";
-import "./Tracking.css";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import usePrivacySettings from "../hooks/usePrivacySettings";
@@ -29,18 +28,18 @@ const Tracking: FunctionComponent = () => {
   };
 
   return (
-    <div id="tracking">
-      <div id="tracking-text">
+    <div className="flex bg-blue-100 border-b border-blue-500 flex-col md:flex-row">
+      <div className="p-2 text-xs">
         We use cookies to analyse our traffic. We may also use features such as offline data,
         browser storage and error reporting to help improve our service. By clicking &quot;
         {t("privacy.accept")}
         &quot; you will allow the use of cookies.
         {" "}
-        <Link to="/about">More information</Link>
+        <Link to="/about" className="text-white">More information</Link>
       </div>
-      <div id="tracking-buttons">
-        <button id="accept-button" type="button" onClick={handleAccept}>{t("privacy.accept")}</button>
-        <button id="decline-button" type="button" onClick={handleDecline}>{t("privacy.decline")}</button>
+      <div id="tracking-buttons" className="flex p-2">
+        <button type="button" onClick={handleAccept} className="text-base rounded-lg h-8 box-border w-1/2 md:w-28 bg-green-100 border border-green-300 text-black mr-2">{t("privacy.accept")}</button>
+        <button type="button" onClick={handleDecline} className="text-base rounded-lg h-8 box-border w-1/2 md:w-28 bg-blue-400 border border-blue-500 text-white">{t("privacy.decline")}</button>
       </div>
     </div>
   );
diff --git a/src/components/VersionPicker.css b/src/components/VersionPicker.css
deleted file mode 100644
index 661b62d..0000000
--- a/src/components/VersionPicker.css
+++ /dev/null
@@ -1,99 +0,0 @@
-@import "shared.css";
-
-#version-picker {
-  display: flex;
-  position: relative;
-  margin: 0;
-  color: var(--darkblue2);
-  width: 5rem;
-  height: 2rem;
-  background-color: var(--white);
-  border-radius: 0.5rem;
-  border: 1px solid var(--darkblue1);
-  box-sizing: border-box;
-  cursor: pointer;
-
-  &.open {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-
-    & #version-picker-popup {
-      display: block;
-    }
-  }
-
-  &:hover {
-    background-color: var(--grey1);
-  }
-
-  @media (max-width: 48rem) {
-    width: 4.7rem;
-  }
-}
-
-#version-picker-content {
-  flex-grow: 1;
-
-  @media (max-width: 48rem) {
-    & img {
-      margin-right: 0;
-    }
-
-    & span {
-      display: none;
-    }
-  }
-}
-
-#version-picker-indicator {
-  display: flex;
-  font-size: 1.5rem;
-  width: 1rem;
-  margin: 0.25rem 0.5rem;
-  color: var(--blue3);
-
-  & svg {
-    display: block;
-  }
-}
-
-#version-picker-popup {
-  display: none;
-  position: absolute;
-  top: 2rem;
-  right: 0;
-  border: 1px solid var(--darkblue1);
-  background-color: var(--white);
-  margin-top: -2px;
-  margin-right: -1px;
-  padding: 0;
-  border-bottom-left-radius: 0.25rem;
-  border-bottom-right-radius: 0.25rem;
-  min-width: 100%;
-  list-style: none;
-  z-index: 5;
-
-  & li {
-    &[aria-selected=true] {
-      background-color: var(--grey2);
-    }
-
-    &:hover {
-      border-radius: 0.25rem;
-      background-color: var(--grey3);
-    }
-  }
-}
-
-#version-picker-popup img, #version-picker-content img {
-  height: 1.325rem;
-  border-radius: 0.25rem;
-  margin-right: 0.25rem;
-}
-
-#version-picker-popup li, #version-picker-content {
-  padding: 0.25rem;
-  line-height: 1.375rem;
-  display: flex;
-  align-content: center;
-}
diff --git a/src/components/VersionPicker.tsx b/src/components/VersionPicker.tsx
index 55047c7..49bcc0b 100644
--- a/src/components/VersionPicker.tsx
+++ b/src/components/VersionPicker.tsx
@@ -1,86 +1,25 @@
 import React, {
-  FunctionComponent, MouseEvent, KeyboardEvent, ReactElement, useState,
+  FunctionComponent, ReactElement,
 } from "react";
-import "./VersionPicker.css";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faAngleDown } from "@fortawesome/free-solid-svg-icons";
-import classNames from "classnames";
-import { useTranslation } from "react-i18next";
 import { ItemProps } from "./Item";
 import { useRulesTestData } from "../context/TestDataContext";
 import { AVAILABLE_LANGUAGES } from "../model/TestDataManager";
+import Dropdown from "./Dropdown";
 
 interface Props {
-  children: Array<ReactElement<ItemProps>>;
+  children: Array<ReactElement<ItemProps<keyof typeof AVAILABLE_LANGUAGES>>>;
 }
 
 const VersionPicker: FunctionComponent<Props> = ({ children }) => {
-  const [open, setOpen] = useState(false);
-  const { t } = useTranslation();
   const { version, setVersion } = useRulesTestData();
 
-  const handleTogglePopup = (event: MouseEvent) => {
-    event.preventDefault();
-    event.stopPropagation();
-
-    setOpen(!open);
-  };
-
-  const handleKeyDown = (event: KeyboardEvent) => {
-    if (event.keyCode === 32) {
-      setOpen(!open);
-    } else if (open) {
-      if (event.keyCode === 27 || event.keyCode === 9) {
-        setOpen(false);
-      } else {
-        return;
-      }
-    } else if (event.keyCode === 40) {
-      setOpen(true);
-    } else {
-      return;
-    }
-
-    event.preventDefault();
-  };
-
-  let content = null;
-  const items = React.Children.map(children, (item: ReactElement<ItemProps>) => {
-    const isSelected = item.props.code === version;
-    if (isSelected) {
-      content = item.props.children;
-    }
-
-    return React.cloneElement(item, {
-      selected: isSelected,
-      onClick: () => setVersion!(item.props.code as keyof typeof AVAILABLE_LANGUAGES),
-    });
-  });
-
-  const className = classNames({
-    open,
-  });
-
   return (
-    <div
-      id="version-picker"
-      className={className}
-      role="listbox"
-      aria-label={t("app.language")}
-      tabIndex={0}
-      onClick={handleTogglePopup}
-      onKeyDown={handleKeyDown}
+    <Dropdown<keyof typeof AVAILABLE_LANGUAGES>
+      selected={version}
+      onSelect={(newVersion) => setVersion!(newVersion)}
     >
-      <div id="version-picker-content">
-        {content}
-      </div>
-      <div id="version-picker-indicator">
-        <FontAwesomeIcon icon={faAngleDown} />
-      </div>
-      <ul id="version-picker-popup">
-        {items}
-      </ul>
-    </div>
+      {children}
+    </Dropdown>
   );
 };
 
diff --git a/src/components/rules-test/RelevantRules.css b/src/components/rules-test/RelevantRules.css
deleted file mode 100644
index 410ee67..0000000
--- a/src/components/rules-test/RelevantRules.css
+++ /dev/null
@@ -1,9 +0,0 @@
-@import "../shared.css";
-
-#relevant-rules {
-  margin-top: 1rem;
-
-  & a {
-    color: var(--black);
-  }
-}
diff --git a/src/components/rules-test/RelevantRules.tsx b/src/components/rules-test/RelevantRules.tsx
index 35a5839..0566e24 100644
--- a/src/components/rules-test/RelevantRules.tsx
+++ b/src/components/rules-test/RelevantRules.tsx
@@ -3,7 +3,6 @@ import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import Question from "../../model/Question";
 import mapRuleToAnchor from "../../utils/mapRuleToAnchor";
-import "./RelevantRules.css";
 
 interface Props {
   question: Question;
@@ -12,13 +11,13 @@ interface Props {
 const RelevantRules: FunctionComponent<Props> = ({ question }) => {
   const { t, i18n: { language } } = useTranslation();
   return (
-    <div id="relevant-rules" className="box-with-header">
-      <h2>
+    <div id="relevant-rules" className="mt-4">
+      <h2 className="text-white p-2 bg-blue-300 inline-block shadow">
         {t("rulestest.relevant-rules")}
       </h2>
       {question.rules.map((rule) => (
-        <div key={rule}>
-          <Link to={`/rules${mapRuleToAnchor(rule, language)}`}>{rule}</Link>
+        <div key={rule} className="bg-white shadow p-4 underline">
+          <Link className="text-black" to={`/rules${mapRuleToAnchor(rule, language)}`}>{rule}</Link>
         </div>
       ))}
     </div>
diff --git a/src/components/rules-test/RulesTest.css b/src/components/rules-test/RulesTest.css
deleted file mode 100644
index 94cfee4..0000000
--- a/src/components/rules-test/RulesTest.css
+++ /dev/null
@@ -1,90 +0,0 @@
-@import "../shared.css";
-
-#test-header {
-  display: flex;
-  justify-content: space-between;
-}
-
-#test-header-text {
-  margin: 0.5rem 0;
-}
-
-#test-header svg, #error-message svg {
-  margin-right: 1rem;
-  color: #063e67;
-}
-
-#test-content {
-  overflow: auto;
-  padding: 1rem;
-
-  & button {
-    background-color: var(--darkblue2);
-    border: 1px solid var(--darkblue1);
-    color: var(--white);
-    margin-top: 1rem;
-    font-size: 1rem;
-    padding: 0.25rem 0.5rem;
-    cursor: pointer;
-
-    &:hover {
-      background-color: var(--darkblue1);
-    }
-  }
-}
-
-.box-with-header {
-  & > h2 {
-    margin: 0;
-    color: var(--header-color);
-    font-size: 1rem;
-    padding: 0.5rem;
-    background-color: var(--header-bg-color);
-    display: inline-block;
-    box-shadow: var(--shadow);
-  }
-}
-
-.box-with-header > div, #test-options > div, #test-header, #error-message {
-  background-color: var(--white);
-  box-shadow: var(--shadow);
-  padding: 1rem;
-}
-
-#test-header {
-  padding: 0.5rem 1rem;
-}
-
-#error-message {
-  background-color: var(--red2);
-  color: var(--white);
-}
-
-#error-message svg {
-  color: var(--white);
-}
-
-
-#test-options {
-  margin-top: 1rem;
-
-  & .option {
-    display: flex;
-
-    &.correct {
-      background-color: var(--green3);
-    }
-
-    &.wrong {
-      background-color: var(--red3);
-    }
-
-    & .check {
-      flex: 0 0 2rem;
-    }
-
-    & .text {
-      flex-grow: 1;
-    }
-  }
-}
diff --git a/src/components/rules-test/RulesTest.tsx b/src/components/rules-test/RulesTest.tsx
index d4fb71c..eda03e5 100644
--- a/src/components/rules-test/RulesTest.tsx
+++ b/src/components/rules-test/RulesTest.tsx
@@ -1,7 +1,6 @@
 /* eslint-disable no-mixed-operators */
 import React, { FunctionComponent, useState, MouseEvent } from "react";
 import classnames from "classnames";
-import "./RulesTest.css";
 import { useTranslation } from "react-i18next";
 import { faChartPie, faCircleExclamation } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -11,8 +10,6 @@ import useAnalytics from "../../hooks/useAnalytics";
 import RelevantRules from "./RelevantRules";
 import VersionPicker from "../VersionPicker";
 import Item from "../Item";
-import us from "../../img/us.svg";
-import de from "../../img/de.svg";
 
 const RulesTest: FunctionComponent = () => {
   const {
@@ -78,21 +75,22 @@ const RulesTest: FunctionComponent = () => {
   const options = Object.keys(answers).map((key) => {
     const isCorrect = question.correct.includes(key);
     const isChecked = checked.includes(key);
-    const className = classnames("option", {
-      correct: reveal && isCorrect === isChecked,
-      wrong: reveal && isCorrect !== isChecked,
+    const className = classnames("flex shadow p-4", {
+      'bg-green-100': reveal && isCorrect === isChecked,
+      'bg-red-100': reveal && isCorrect !== isChecked,
+      'bg-white': !reveal
     });
 
     return (
       <div key={key} className={className}>
-        <div className="check">
+        <div className="flex basis-8">
           <CheckBox
             checked={isChecked}
             onChange={() => updateChecked(key)}
             labelledBy={`test-option-${key}`}
           />
         </div>
-        <div id={`test-option-${key}`} className="text">
+        <div id={`test-option-${key}`} className="flex-grow">
           {question?.answers[languageMissing ? "en" : language][key]}
         </div>
       </div>
@@ -113,9 +111,9 @@ const RulesTest: FunctionComponent = () => {
 
   return (
     <>
-      <div id="test-header">
-        <div id="test-header-text">
-          <FontAwesomeIcon icon={faChartPie} />
+      <div className="flex justify-between px-4 py-2 bg-white">
+        <div className="my-2">
+          <FontAwesomeIcon icon={faChartPie} className="mr-4 text-blue-400" />
           <span>{`${t("rulestest.overall")} ${numCorrect}/${numAsked} (${percentOverall}%)`}</span>
           <span> - </span>
           <span>{`${t("rulestest.question")} ${question.numCorrect}/${question.numAsked} (${percentQuestion}%)`}</span>
@@ -130,25 +128,25 @@ const RulesTest: FunctionComponent = () => {
         </VersionPicker>
       </div>
       { languageMissing && (
-        <div id="error-message">
-          <FontAwesomeIcon icon={faCircleExclamation}/>
+        <div className="flex px-4 py-4 bg-red-200 text-white">
+          <FontAwesomeIcon icon={faCircleExclamation} className="mr-4"/>
           <span>{`${t("rulestest.language-missing")}`}</span>
         </div>
       )}
-      <form id="test-content">
-        <div id="test-question" className="box-with-header">
-          <h2>
+      <form className="overflow-auto p-4">
+        <div>
+          <h2 className="text-white p-2 bg-blue-300 inline-block shadow">
             {`${t("rulestest.question")} ${question.id}`}
           </h2>
-          <div>
+          <div className="bg-white shadow p-4">
             {question.question[languageMissing ? "en" : language]}
           </div>
         </div>
-        <div id="test-options">
+        <div className="mt-4">
           {options}
         </div>
         {relevantRules}
-        <button type="submit" onClick={handleButtonClick}>{buttonText}</button>
+        <button type="submit" className="bg-blue-400 border border-blue-500 text-white mt-4 text-base py-1 px-2 cursor-pointer hover:bg-blue-500" onClick={handleButtonClick}>{buttonText}</button>
       </form>
     </>
   );
diff --git a/src/components/shared.css b/src/components/shared.css
deleted file mode 100644
index 412f2e1..0000000
--- a/src/components/shared.css
+++ /dev/null
@@ -1,26 +0,0 @@
-:root {
-  --green1: #088a46;
-  --green2: #48b95e;
-  --green3: #aad357;
-  --red1: #c01e2e;
-  --red2: #ec1941;
-  --red3: #f15257;
-  --orange1: #f78234;
-  --orange2: #f6a125;
-  --orange3: #fdb132;
-  --darkblue1: #00263c;
-  --darkblue2: #063e67;
-  --blue1: #2a579c;
-  --blue2: #0181c9;
-  --blue3: #00aef3;
-  --white: #ffffff;
-  --grey1: #e1e1e1;
-  --grey2: #cccccc;
-  --grey3: #888888;
-  --black: #000000;
-
-  --header-bg-color: var(--blue1);
-  --header-color: var(--white);
-
-  --shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-}
diff --git a/src/components/stats/Question.css b/src/components/stats/Question.css
deleted file mode 100644
index 9fb1341..0000000
--- a/src/components/stats/Question.css
+++ /dev/null
@@ -1,80 +0,0 @@
-@import "../shared.css";
-
-.stat-question {
-  background-color: var(--white);
-  box-shadow: var(--shadow);
-
-  display: grid;
-
-  grid-template-columns: 2rem auto 4rem 7rem;
-  grid-template-rows: auto;
-
-  grid-template-areas:
-    "icon number box result"
-    "content content content content";
-
-  & > div, & > svg {
-    padding: 0.5rem;
-  }
-
-  & > svg {
-    justify-self: center;
-    color: var(--blue3);
-    grid-area: icon;
-  }
-
-  & .number {
-    grid-area: number;
-  }
-
-  & .box {
-    justify-self: center;
-
-    & > svg {
-      font-size: 0.875rem;
-      margin-right: 0.5rem;
-    }
-  }
-
-  & .result {
-    grid-area: result;
-    text-align: center;
-    color: #ffffff;
-
-    &.empty {
-      background-color: var(--grey2);
-      color: var(--grey3);
-    }
-
-    &.bad {
-      background-color: var(--red3);
-    }
-
-    &.ok {
-      background-color: var(--orange3);
-    }
-
-    &.good {
-      background-color: var(--green1);
-    }
-  }
-
-  & .content {
-    grid-area: content;
-
-    & .text {
-      padding: 0.5rem;
-    }
-
-    & .options {
-      display: grid;
-
-      grid-template-columns: 2rem auto;
-      grid-template-rows: auto;
-
-      & > div {
-        padding: 0.25rem 0.5rem;
-      }
-    }
-  }
-}
diff --git a/src/components/stats/Question.tsx b/src/components/stats/Question.tsx
index 0777dc6..1cfe7ef 100644
--- a/src/components/stats/Question.tsx
+++ b/src/components/stats/Question.tsx
@@ -4,8 +4,8 @@ import { useTranslation } from "react-i18next";
 import { faChevronDown, faChevronRight, faFolderOpen } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Question from "../../model/Question";
-import "./Question.css";
 import CheckBox from "../CheckBox";
+import {useRulesTestData} from "../../context/TestDataContext";
 
 interface Props {
   question: Question;
@@ -14,6 +14,7 @@ interface Props {
 const QuestionComponent: FunctionComponent<Props> = ({ question }) => {
   const [open, setOpen] = useState(false);
   const { i18n: { language } } = useTranslation();
+  const { languageMissing } = useRulesTestData();
 
   const toggleOpen = () => {
     setOpen(!open);
@@ -32,13 +33,13 @@ const QuestionComponent: FunctionComponent<Props> = ({ question }) => {
   const percent = question.numAsked
     ? Math.round(100 / question.numAsked * question.numCorrect)
     : 0;
-  let color = "bad";
+  let color = "bg-red-100 text-white";
   if (question.numAsked === 0) {
-    color = "empty";
+    color = "bg-grey-300 text-grey-400";
   } else if (percent >= 80) {
-    color = "good";
+    color = "bg-green-400 text-white";
   } else if (percent >= 50) {
-    color = "ok";
+    color = "bg-orange-100 text-white";
   }
 
   let icon;
@@ -46,32 +47,32 @@ const QuestionComponent: FunctionComponent<Props> = ({ question }) => {
   if (open) {
     icon = faChevronDown;
 
-    const answers = question.answers[language] || [];
+    const answers = question.answers[languageMissing ? 'en' : language] || [];
     const options = Object.keys(answers).map((key) => {
       const isChecked = question.correct.includes(key);
 
       return (
         <React.Fragment key={key}>
-          <div className="check">
+          <div className="px-2 py-1">
             <CheckBox
               checked={isChecked}
               labelledBy={`test-option-${key}`}
               readOnly
             />
           </div>
-          <div className="text">
-            {question?.answers[language][key]}
+          <div className="px-2 py-1">
+            {question?.answers[languageMissing ? 'en' : language][key]}
           </div>
         </React.Fragment>
       );
     });
 
     content = (
-      <div className="content">
-        <div className="text">
-          {question.question[language]}
+      <div className="content p-2 [grid-area:content]">
+        <div className="p-2">
+          {question.question[languageMissing ? 'en' : language]}
         </div>
-        <div className="options">
+        <div className="grid grid-cols-[2rem_auto] grid-rows-[auto]">
           {options}
         </div>
       </div>
@@ -83,22 +84,22 @@ const QuestionComponent: FunctionComponent<Props> = ({ question }) => {
   return (
     <div
       key={question.id}
-      className="stat-question"
+      className="bg-white shadow grid text-base grid-cols-[2rem_auto_4rem_7rem] grid-rows-[auto] [grid-template-areas:'icon_number_box_result''content_content_content_content']"
       role="switch"
       aria-checked={open}
       tabIndex={0}
       onClick={toggleOpen}
       onKeyDown={handleKeyDown}
     >
-      <FontAwesomeIcon icon={icon} size="lg" />
-      <div className="number">
+      <FontAwesomeIcon className="p-2 self-center text-blue-100 [grid-area:icon]" icon={icon} size="lg" />
+      <div className="p-2 self-center [grid-area:number]">
         {question.id}
       </div>
-      <div className="box">
-        <FontAwesomeIcon icon={faFolderOpen} size="lg" />
-        <span>{question.box}</span>
+      <div className="p-2 justify-self-center">
+        <FontAwesomeIcon className="mr-2 text-sm" icon={faFolderOpen} size="lg" />
+        <span className="text-base">{question.box}</span>
       </div>
-      <div className={`result ${color}`}>{`${question.numCorrect} / ${question.numAsked} (${percent}%)`}</div>
+      <div className={`p-2 text-center ${color} [grid-area:result]`}>{`${question.numCorrect} / ${question.numAsked} (${percent}%)`}</div>
       {content}
     </div>
   );
diff --git a/src/components/stats/Rule.css b/src/components/stats/Rule.css
deleted file mode 100644
index 6faaf3c..0000000
--- a/src/components/stats/Rule.css
+++ /dev/null
@@ -1,46 +0,0 @@
-@import "../shared.css";
-
-.rule-stat-box {
-  margin-top: 1rem;
-}
-
-.rule-stat-header {
-  display: flex;
-  justify-content: space-between;
-}
-
-.rule-stat-title, .rule-stat-stats {
-  font-size: 1rem;
-  padding: 0.5rem;
-  color: var(--header-color);
-}
-
-.rule-stat-title {
-  margin: 0;
-  background-color: var(--header-bg-color);
-}
-
-.rule-stat-stats {
-  &.empty {
-    background-color: var(--grey2);
-    color: var(--grey3);
-  }
-
-  &.bad {
-    background-color: var(--red3);
-  }
-
-  &.ok {
-    background-color: var(--orange3);
-  }
-
-  &.good {
-    background-color: var(--green1);
-  }
-}
-
-@media (max-width: 48rem) {
-  .rule-stat-header {
-    display: block;
-  }
-}
diff --git a/src/components/stats/Rule.tsx b/src/components/stats/Rule.tsx
index 9ecd044..2f4c2af 100644
--- a/src/components/stats/Rule.tsx
+++ b/src/components/stats/Rule.tsx
@@ -1,6 +1,5 @@
 /* eslint-disable no-mixed-operators */
 import React, { FunctionComponent } from "react";
-import "./Rule.css";
 import { useTranslation } from "react-i18next";
 import QuestionComponent from "./Question";
 import Question from "../../model/Question";
@@ -25,13 +24,13 @@ const Rule: FunctionComponent<Props> = ({
   }
 
   const percent = asked ? Math.round(100 / asked * correct) : 0;
-  let color = "bad";
+  let color = "bg-red-100 text-white";
   if (!asked) {
-    color = "empty";
+    color = "bg-grey-300 text-grey-400";
   } else if (percent >= 80) {
-    color = "good";
+    color = "bg-green-300 text-white";
   } else if (percent >= 50) {
-    color = "ok";
+    color = "bg-orange-100 text-white";
   }
 
   const details = questions.map((question) => (
@@ -39,10 +38,10 @@ const Rule: FunctionComponent<Props> = ({
   ));
 
   return (
-    <div className="rule-stat-box">
-      <div className="rule-stat-header">
-        <h2 className="rule-stat-title">{t(key)}</h2>
-        <div className={`rule-stat-stats ${color}`}>{`${correct} / ${asked} (${percent}%)`}</div>
+    <div className="mx-4 mt-4">
+      <div className="blocks md:flex justify-between">
+        <h2 className="bg-blue-400 p-2 font-bold text-white text-base">{t(key)}</h2>
+        <div className={`text-base p-2 ${color}`}>{`${correct} / ${asked} (${percent}%)`}</div>
       </div>
       <div className="rule-stat-content">
         {details}
diff --git a/src/components/stats/Stats.css b/src/components/stats/Stats.css
deleted file mode 100644
index cc7d7ab..0000000
--- a/src/components/stats/Stats.css
+++ /dev/null
@@ -1,39 +0,0 @@
-@import "../shared.css";
-
-#stats {
-  padding: 1rem;
-  overflow: auto;
-}
-
-#stats-overall {
-  background-color: var(--white);
-  box-shadow: var(--shadow);
-  padding: 1rem;
-  font-size: 1.25rem;
-
-  & h2 {
-    font-size: 1.25rem;
-    margin: 0;
-  }
-
-  & svg {
-    display: inline-block;
-    margin-right: 1rem;
-    width: 1.25rem
-  }
-}
-
-#stats-asked {
-  margin-top: 1rem;
-  color: var(--blue1);
-}
-
-#stats-correct {
-  margin-top: 0.5rem;
-  color: var(--green1);
-}
-
-#stats-percent {
-  margin-top: 0.5rem;
-  color: var(--orange1);
-}
diff --git a/src/components/stats/Stats.tsx b/src/components/stats/Stats.tsx
index 02b6f04..866959e 100644
--- a/src/components/stats/Stats.tsx
+++ b/src/components/stats/Stats.tsx
@@ -5,8 +5,8 @@ import { faCheck, faPercent, faQuestion } from "@fortawesome/free-solid-svg-icon
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useRulesTestData } from "../../context/TestDataContext";
 import Question from "../../model/Question";
-import "./Stats.css";
 import Rule from "./Rule";
+import Box from "../Box";
 
 type OrderedData = {
   [rule: string]: {
@@ -54,22 +54,22 @@ const Stats: FunctionComponent = () => {
   });
 
   return (
-    <div id="stats">
-      <div id="stats-overall">
-        <h2>{t("stats.overall")}</h2>
-        <div id="stats-asked">
-          <FontAwesomeIcon icon={faQuestion} size="lg" />
+    <div className="overflow-auto text-xl">
+      <Box>
+        <h2 className="font-bold">{t("stats.overall")}</h2>
+        <div className="text-blue-300 mt-2">
+          <FontAwesomeIcon className="inline-block mr-4 w-5" icon={faQuestion} size="lg" />
           {`${asked} ${t("stats.asked")}`}
         </div>
-        <div id="stats-correct">
-          <FontAwesomeIcon icon={faCheck} size="lg" />
+        <div className="text-green-300 mt-2">
+          <FontAwesomeIcon className="inline-block mr-4 w-5" icon={faCheck} size="lg" />
           {`${correct} ${t("stats.correct")}`}
         </div>
-        <div id="stats-percent">
-          <FontAwesomeIcon icon={faPercent} size="lg" />
+        <div className="text-orange-300 mt-2">
+          <FontAwesomeIcon className="inline-block mr-4 w-5" icon={faPercent} size="lg" />
           {`${percent}%`}
         </div>
-      </div>
+      </Box>
       {rules}
     </div>
   );
diff --git a/src/styles.css b/src/styles.css
new file mode 100644
index 0000000..b5c61c9
--- /dev/null
+++ b/src/styles.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 0000000..72a68fd
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,76 @@
+import {Config} from "tailwindcss";
+import plugin from "tailwindcss/plugin";
+
+const config: Config = {
+  content: ["./src/**/*.{html,tsx}"],
+  theme: {
+    colors: {
+      green: {
+        100: "#aad357",
+        200: "#48b95e",
+        300: "#088a46",
+      },
+      red: {
+        100: "#f15257",
+        200: "#ec1941",
+        300: "#c01e2e",
+      },
+      orange: {
+        100: "#fdb132",
+        200: "#f6a125",
+        300: "#f78234",
+      },
+      blue: {
+        100: "#00aef3",
+        200: "#0181c9",
+        300: "#2a579c",
+        400: "#063e67",
+        500: "#00263c",
+      },
+      grey: {
+        100: "#f2f1f3",
+        200: "#e1e1e1",
+        300: "#cccccc",
+        400: "#888888",
+      },
+      white: '#ffffff',
+      black: "#000000"
+    },
+    fontFamily: {
+      sans: ['Roboto', "Helvetica", "Arial", "sans-serif"]
+    },
+    extend: {
+      keyframes: {
+        loading: {
+          '0%, 40%, 100%': {
+            opacity: '100%'
+          },
+          '20%': {
+            opacity: '0'
+          }
+        }
+      },
+      animation: {
+        loading: 'loading 0.8s infinite ease-in-out'
+      }
+    },
+  },
+  plugins: [
+    plugin(({ matchUtilities, theme }) => {
+      matchUtilities(
+        {
+          "animation-delay": (value) => {
+            return {
+              "animation-delay": value,
+            };
+          },
+        },
+        {
+          values: theme("transitionDelay"),
+        }
+      );
+    }),
+  ],
+}
+
+export default config;