diff --git a/.gitignore b/.gitignore
index d436c6d..cf0866a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,3 +16,6 @@ yarn-error.log*
 
 # macOS-specific files
 .DS_Store
+
+# vscode settings and dictionaries
+.vscode
diff --git a/README.md b/README.md
index 8984f5b..92d9935 100644
--- a/README.md
+++ b/README.md
@@ -1,40 +1,125 @@
-# Welcome to [Astro](https://astro.build)
+# Accessible Astro Starter
 
-> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+This starter project is build upon the (awesome) Astro static site builder. For their official documentation check their [GitHub repository](https://github.com/snowpackjs/astro). This starter offers a couple of Accessibility components and some utility classes to get you building your project faster.
 
-## 🚀 Project Structure
+[Checkout a demo here!](https://accessible-astro.markteekman.nl/)
 
-Inside of your Astro project, you'll see the following folders and files:
+## Accessibility features
 
+In this starter you'll find a couple of things:
+
+- Accessible landmarks in the `DefaultLayout.astro` file such as `header`, `main` and `footer`
+- Accessible landmark examples in the `index.astro` file such as `section` and `nav`
+- `SkipLinks.astro` component to skip to either the main menu or the main content
+- `Navigation.astro` component with keyboard accessible navigation (arrow keys, escape key)
+- `DarkMode.astro` component toggle with accessible button and a user system preferred color scheme
+- Outline focus indicator which works on dark and light backgrounds
+- `.sr-only` token class for screen reader only text content
+
+## Other features
+
+This starter contains some extra Design System like utility classes to aid in the global layout of your project. All of this can be found in the `public/scss/base` directory, and compiles in the `globals.scss` file. Using these primitives is totally optional, use or remove at your own preference :) What it contains:
+
+- Reset file to reset browser defaults and ensure everything looks good
+- Some basic font settings, such as responsive heading sizes
+- Color shades for your color pallet, rendered to the `:root` of your website as custom properties
+- Simple auto-grid setting using `display: grid` and a `data-attribute`
+- A bit more advanced grid settings using `display` grid to easily setup a 12-column layout
+- Utilities set in `_utility.scss` for things such as spacing, sizes, colors, and box-shadows
+
+### Using Auto Grid
+
+Simply apply the `data-auto-grid` attribute on your parent `div` with a number from 2-6 (if you need more columns just tweak the for loop in `_auto-grid.scss`). The grid automatically creates new rows (this is how `display: grid` works by default).
+
+```html
+<div class="container" data-auto-grid="3">
+  <p>First column</p>
+  <p>Second column</p>
+  <p>Third column</p>
+</div>
+```
+
+You can also center the contents of the cell using the `data-grid-center` attribute. Use it together with `data-auto-grid`.
+
+```html
+<div class="container" data-auto-grid="3" data-grid-center>
+  <!-- ... -->
+</div>
+```
+
+_Examples are included in the index.astro file_
+
+### Using Grid
+
+Grid enables you to build a little more complex layouts if need be. Using `display: flex;` you can define the amount of columns `.cells` should take up in your `.grid`, and for which breakpoint they should do so. You can also use offset on a grid to create an extra column of offset. For all examples check [my documentation website](https://markteekman.nl/project/flexbox-grid).
+
+```html
+<div class="container">
+  <div class="grid gutters">
+    <div class="cell small-12 medium-3">
+      <h3>Sidebar</h3>
+      <!-- ... -->
+    </div>
+    <div class="cell small-12 medium-8 offset-medium-1">
+      <h3>Main</h3>
+      <!-- ... -->
+    </div>
+  </div>
+</div>
 ```
-/
-├── public/
-│   ├── robots.txt
-│   └── favicon.ico
-├── src/
-│   ├── components/
-│   │   └── Tour.astro
-│   └── pages/
-│       └── index.astro
-└── package.json
+
+_Examples are included in the index.astro file_
+
+### Using Spacing
+
+To prevent spacing each element in your website individualy and to prevent inconsistencies, you can use the `.space-#` utility classes. A good practice is to set in on your `<section>` elements, for starters. To space out content you can use a special `.space-content` class on your parent div (for example in a `.cell` of your `.grid`). By default, padding top and bottom are set with these utilities. You can also set it explicitly using either `.top` of `.bottom` class tokens. Find or tweak all spacing options in `_space.scss`.
+
+```html
+<section class="space-32">
+  <div class="container">
+    <h2 class="space-16 bottom">Grid example</h2>
+  </div>
+</section>
 ```
 
-Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+_Examples are included in the index.astro file_
+
+### Using Sizes
 
-There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+If you need an exception on your font-size for a specific reason you can use size utility classes to accomplish that. Using it is easy. Find or tweak all spacing options in `_size.scss`.
 
-Any static assets, like images, can be placed in the `public/` directory.
+```html
+<div class="container">
+  <p class="size-20">I'm a bigger font size!</p>
+</div>
+```
+
+_Examples are included in the index.astro file_
+
+## Using Colors
+
+You can setup your own color schemes in the `_colors.scss` file. You'll find a SCSS map, which gets printed inside `_root.scss` as custom properties.
+
+```scss
+$colors: (
+  primary-clr: (
+    100: hsl(262, 90%, 95%),
+    200: hsl(262, 100%, 88%),
+    300: hsl(262, 100%, 78%),
+    400: hsl(268, 82%, 60%),
+    500: hsl(273, 79%, 48%),
+  ),
+  // ...
+);
+```
 
-## 🧞 Commands
+## Helping out
 
-All commands are run from the root of the project, from a terminal:
+If you find that something isn't working right then I'm also happy to hear it to improve this starter! Let me know by either:
 
-| Command         | Action                                      |
-|:----------------|:--------------------------------------------|
-| `npm install`   | Installs dependencies                       |
-| `npm start`     | Starts local dev server at `localhost:3000` |
-| `npm run build` | Build your production site to `./dist/`     |
+1. [Filing an issue](https://github.com/markteekman/tiny-code/issues)
+2. Or sending a [pull request](https://github.com/markteekman/accessible-astro-starter/pulls)
 
-## 👀 Want to learn more?
+## Thank you!
 
-Feel free to check [our documentation](https://github.com/snowpackjs/astro) or jump into our [Discord server](https://astro.build/chat).
+A big thank you to the creators of this awesome Astro static site builder and to all using this starter to make the web a bit more accessible for all people around the world :)
diff --git a/package-lock.json b/package-lock.json
index 2f305e5..36d93e4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -45,9 +45,9 @@
       "dev": true
     },
     "@astrojs/renderer-preact": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/@astrojs/renderer-preact/-/renderer-preact-0.2.0.tgz",
-      "integrity": "sha512-fiO7q4Temi/5PIAA8VVqnuBjEoaCFFunjqCGl7+8OLjs4KIcBBW5Mfk3Ejcu/mc1zmcL/yuOBlzLMX4sPPPh2Q==",
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@astrojs/renderer-preact/-/renderer-preact-0.2.1.tgz",
+      "integrity": "sha512-6OSU0uvChdr5Ecd2330g/7gT4+Sfrvro274fETnWXy41YbbmETibG4GcI142nIhlQXUOw0jpMLv0KPl6Y5sfhw==",
       "dev": true,
       "requires": {
         "@babel/plugin-transform-react-jsx": "^7.14.5",
@@ -354,16 +354,34 @@
       }
     },
     "@babel/plugin-transform-react-jsx": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.14.5.tgz",
-      "integrity": "sha512-7RylxNeDnxc1OleDm0F5Q/BSL+whYRbOAR+bwgCxIr0L32v7UFh/pz1DLMZideAUxKT6eMoS2zQH6fyODLEi8Q==",
+      "version": "7.14.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.14.9.tgz",
+      "integrity": "sha512-30PeETvS+AeD1f58i1OVyoDlVYQhap/K20ZrMjLmmzmC2AYR/G43D4sdJAaDAqCD3MYpSWbmrz3kES158QSLjw==",
       "dev": true,
       "requires": {
         "@babel/helper-annotate-as-pure": "^7.14.5",
         "@babel/helper-module-imports": "^7.14.5",
         "@babel/helper-plugin-utils": "^7.14.5",
         "@babel/plugin-syntax-jsx": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "@babel/types": "^7.14.9"
+      },
+      "dependencies": {
+        "@babel/helper-validator-identifier": {
+          "version": "7.14.9",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.9.tgz",
+          "integrity": "sha512-pQYxPY0UP6IHISRitNe8bsijHex4TWZXi2HwKVsjPiltzlhse2znVcm9Ace510VT1kxIHjGJCZZQBX2gJDbo0g==",
+          "dev": true
+        },
+        "@babel/types": {
+          "version": "7.15.0",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.15.0.tgz",
+          "integrity": "sha512-OBvfqnllOIdX4ojTHpwZbpvz4j3EWyjkZEdmjH0/cgsd6QOdSgU8rLSk6ard/pcW7rlmjdVSX/AWOaORR1uNOQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.14.9",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/template": {
@@ -404,6 +422,12 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@ljharb/has-package-exports-patterns": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/@ljharb/has-package-exports-patterns/-/has-package-exports-patterns-0.0.1.tgz",
+      "integrity": "sha512-J4HxcjHI8EzVwXj2HKfZrwnWv4wmOhGxSHyxDQLhiL4ibwRoIkYBqsacZUXFUWQzJtW6QC+FKSNy8HqKjkEqaQ==",
+      "dev": true
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -765,6 +789,25 @@
         "hash-sum": "^2.0.0"
       }
     },
+    "@stylelint/postcss-css-in-js": {
+      "version": "0.37.2",
+      "resolved": "https://registry.npmjs.org/@stylelint/postcss-css-in-js/-/postcss-css-in-js-0.37.2.tgz",
+      "integrity": "sha512-nEhsFoJurt8oUmieT8qy4nk81WRHmJynmVwn/Vts08PL9fhgIsMhk1GId5yAN643OzqEEb5S/6At2TZW7pqPDA==",
+      "dev": true,
+      "requires": {
+        "@babel/core": ">=7.9.0"
+      }
+    },
+    "@stylelint/postcss-markdown": {
+      "version": "0.36.2",
+      "resolved": "https://registry.npmjs.org/@stylelint/postcss-markdown/-/postcss-markdown-0.36.2.tgz",
+      "integrity": "sha512-2kGbqUVJUGE8dM+bMzXG/PYUWKkjLIkRLWNh39OaADkiabDRdw8ATFCgbMz5xdIcvwspPAluSL7uY+ZiTWdWmQ==",
+      "dev": true,
+      "requires": {
+        "remark": "^13.0.0",
+        "unist-util-find-all-after": "^3.0.2"
+      }
+    },
     "@szmarczak/http-timer": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-4.0.6.tgz",
@@ -849,10 +892,22 @@
         "@types/unist": "*"
       }
     },
+    "@types/minimist": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.2.tgz",
+      "integrity": "sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==",
+      "dev": true
+    },
     "@types/node": {
-      "version": "16.4.9",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.4.9.tgz",
-      "integrity": "sha512-HXhRf581nCItzn8yevv4LYt+bJ5cBbDBAJExbDPMeU/2n5/j0ZemGpayahFBP4xL7RseaCLASLD9i9AYyDe7Nw==",
+      "version": "16.4.13",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.4.13.tgz",
+      "integrity": "sha512-bLL69sKtd25w7p1nvg9pigE4gtKVpGTPojBFLMkGHXuUgap2sLqQt2qUnqmVCDfzGUL0DRNZP+1prIZJbMeAXg==",
+      "dev": true
+    },
+    "@types/normalize-package-data": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz",
+      "integrity": "sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==",
       "dev": true
     },
     "@types/parse-json": {
@@ -987,106 +1042,106 @@
       }
     },
     "@vue/reactivity": {
-      "version": "3.2.0-beta.7",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.0-beta.7.tgz",
-      "integrity": "sha512-qS6/g+CaPRDNssjk6sLn2od6B/CGKoG0UnbCRE+TrgKKf7QGZGv5RBjZrqqaJvgBx1gjPjRi7DVWO/YWvdyNCA==",
+      "version": "3.2.0-beta.8",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.0-beta.8.tgz",
+      "integrity": "sha512-LqLvqdLvd+0HeANDWiDVDe5qka9FHjFsVabwJwamqttsKOqDiXehhFST3gPAuUpcGS5UKzNUt040YhdeO7D8YA==",
       "dev": true,
       "requires": {
-        "@vue/shared": "3.2.0-beta.7"
+        "@vue/shared": "3.2.0-beta.8"
       },
       "dependencies": {
         "@vue/shared": {
-          "version": "3.2.0-beta.7",
-          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.0-beta.7.tgz",
-          "integrity": "sha512-rXkGVA+HeVsnB/pba3uZK9KJCwNetCupqHX5g+aXhZPucHTC0YCPoZFYc4qUE8wa8atXTBWP+1VnztbXBPGRuA==",
+          "version": "3.2.0-beta.8",
+          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.0-beta.8.tgz",
+          "integrity": "sha512-+9azBIVNUvrUDyvUk/0/yp0FZ4RjAWfZf0CSrpgt+y3Pn4tj4qtUChvEgZ4pO2F6vQ3wGliUjh9YydVlYGgmCg==",
           "dev": true
         }
       }
     },
     "@vue/runtime-core": {
-      "version": "3.2.0-beta.7",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.0-beta.7.tgz",
-      "integrity": "sha512-qlj4Fju6G7/A90XNYVs8H2RV0fNEf0An6LM+tsX4/6QZ44XFYd7W82t1YSUPuihKVAoTh2+xGvAOxu+3sz+RiA==",
+      "version": "3.2.0-beta.8",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.0-beta.8.tgz",
+      "integrity": "sha512-apNhoNV7cWo2Ta/BUTSGmNzS9DAB+qrC2/cxJleJjiHvv++UN+wEfQynqxrPAeb3gNDyPAWNK7hC+i7H+x3kUg==",
       "dev": true,
       "requires": {
-        "@vue/reactivity": "3.2.0-beta.7",
-        "@vue/shared": "3.2.0-beta.7"
+        "@vue/reactivity": "3.2.0-beta.8",
+        "@vue/shared": "3.2.0-beta.8"
       },
       "dependencies": {
         "@vue/shared": {
-          "version": "3.2.0-beta.7",
-          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.0-beta.7.tgz",
-          "integrity": "sha512-rXkGVA+HeVsnB/pba3uZK9KJCwNetCupqHX5g+aXhZPucHTC0YCPoZFYc4qUE8wa8atXTBWP+1VnztbXBPGRuA==",
+          "version": "3.2.0-beta.8",
+          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.0-beta.8.tgz",
+          "integrity": "sha512-+9azBIVNUvrUDyvUk/0/yp0FZ4RjAWfZf0CSrpgt+y3Pn4tj4qtUChvEgZ4pO2F6vQ3wGliUjh9YydVlYGgmCg==",
           "dev": true
         }
       }
     },
     "@vue/runtime-dom": {
-      "version": "3.2.0-beta.7",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.0-beta.7.tgz",
-      "integrity": "sha512-RrIjQEi+Dngwb4vCC+aSgGLYP/OGl2x56oFve1wSnYDImGaZxyn/4a07m515jwy4yENeQpPkd7HfOpseCOE4Mg==",
+      "version": "3.2.0-beta.8",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.0-beta.8.tgz",
+      "integrity": "sha512-slSMn5aEJssUrGHB7B+wcFc/xi1atixil+CIEjaFBUaMNYY5ssNmTIEO0RD7jnbAajkSQ1m2bI9qr1yezKWQ1w==",
       "dev": true,
       "requires": {
-        "@vue/runtime-core": "3.2.0-beta.7",
-        "@vue/shared": "3.2.0-beta.7",
+        "@vue/runtime-core": "3.2.0-beta.8",
+        "@vue/shared": "3.2.0-beta.8",
         "csstype": "^2.6.8"
       },
       "dependencies": {
         "@vue/shared": {
-          "version": "3.2.0-beta.7",
-          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.0-beta.7.tgz",
-          "integrity": "sha512-rXkGVA+HeVsnB/pba3uZK9KJCwNetCupqHX5g+aXhZPucHTC0YCPoZFYc4qUE8wa8atXTBWP+1VnztbXBPGRuA==",
+          "version": "3.2.0-beta.8",
+          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.0-beta.8.tgz",
+          "integrity": "sha512-+9azBIVNUvrUDyvUk/0/yp0FZ4RjAWfZf0CSrpgt+y3Pn4tj4qtUChvEgZ4pO2F6vQ3wGliUjh9YydVlYGgmCg==",
           "dev": true
         }
       }
     },
     "@vue/server-renderer": {
-      "version": "3.2.0-beta.7",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.0-beta.7.tgz",
-      "integrity": "sha512-KwaPMtyldU7YGqCIwAUgZ2rxtIAhBfg1x9g1cW0IUJsJ1cv7PwID4nwsBPzbtu/lZ662lQX2+F7F/1Gmbg7+Bw==",
+      "version": "3.2.0-beta.8",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.0-beta.8.tgz",
+      "integrity": "sha512-MvF0eUox7o/6pLuUuSxzoDGd8GXBwl+8WNyuMXx6zyjmc9ef66qDptlIykxqbb/qXxAMLYbWT9wgXehonBBHUA==",
       "dev": true,
       "requires": {
-        "@vue/compiler-ssr": "3.2.0-beta.7",
-        "@vue/shared": "3.2.0-beta.7"
+        "@vue/compiler-ssr": "3.2.0-beta.8",
+        "@vue/shared": "3.2.0-beta.8"
       },
       "dependencies": {
         "@vue/compiler-core": {
-          "version": "3.2.0-beta.7",
-          "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.0-beta.7.tgz",
-          "integrity": "sha512-JoL8pskBqYDcw3Yf6Bm/TUz4ZIRIkT7VzMzk0chBwpxHima9roZZA2bn5M/JznZryh9JNfrpm1DdDKmsdrRVSQ==",
+          "version": "3.2.0-beta.8",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.0-beta.8.tgz",
+          "integrity": "sha512-nVJk+DMl0tY9e4FLKcxyWQEtnLwHhW9K3rq15oqNhnRGP/mk2zN1y/BDAC7hQv1MxU3RX4X8fUOw0EbzVl/vDA==",
           "dev": true,
           "requires": {
             "@babel/parser": "^7.12.0",
             "@babel/types": "^7.12.0",
-            "@vue/shared": "3.2.0-beta.7",
+            "@vue/shared": "3.2.0-beta.8",
             "estree-walker": "^2.0.1",
             "source-map": "^0.6.1"
           }
         },
         "@vue/compiler-dom": {
-          "version": "3.2.0-beta.7",
-          "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.0-beta.7.tgz",
-          "integrity": "sha512-51gwn3EaaNs1XI6D3aoPDuDmS1SxBb/HVlVZwlEYDoje6UeF3lx9M6pXOM6CoMLiFNat4CkwqQZu6SghlY0PYw==",
+          "version": "3.2.0-beta.8",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.0-beta.8.tgz",
+          "integrity": "sha512-A2RwLyUkN0jsC0fx/VOR1POzN64ZAzSFtnkhhuSs81K7MsIW0OgYmmFutqLJiycTSBXEs+yZ6J9cZPBhcfPxeg==",
           "dev": true,
           "requires": {
-            "@vue/compiler-core": "3.2.0-beta.7",
-            "@vue/shared": "3.2.0-beta.7"
+            "@vue/compiler-core": "3.2.0-beta.8",
+            "@vue/shared": "3.2.0-beta.8"
           }
         },
         "@vue/compiler-ssr": {
-          "version": "3.2.0-beta.7",
-          "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.0-beta.7.tgz",
-          "integrity": "sha512-85sT42ErbQ8DmR2w+Joqh5bskqtVj7Y21iwi2Hu1Ccr76vEiD4/7PB8fuhbkDmilOAMMcvh90KyvXpYJ84THCw==",
+          "version": "3.2.0-beta.8",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.0-beta.8.tgz",
+          "integrity": "sha512-BdQfgIQ3CTO6tlCJ+KWn5vkNBG06voPs56UQ6TKWj2LmP/wWuxkaGZU2YlszvOERY1oJWQxs54SdGFK8hq70Ww==",
           "dev": true,
           "requires": {
-            "@vue/compiler-dom": "3.2.0-beta.7",
-            "@vue/shared": "3.2.0-beta.7"
+            "@vue/compiler-dom": "3.2.0-beta.8",
+            "@vue/shared": "3.2.0-beta.8"
           }
         },
         "@vue/shared": {
-          "version": "3.2.0-beta.7",
-          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.0-beta.7.tgz",
-          "integrity": "sha512-rXkGVA+HeVsnB/pba3uZK9KJCwNetCupqHX5g+aXhZPucHTC0YCPoZFYc4qUE8wa8atXTBWP+1VnztbXBPGRuA==",
+          "version": "3.2.0-beta.8",
+          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.0-beta.8.tgz",
+          "integrity": "sha512-+9azBIVNUvrUDyvUk/0/yp0FZ4RjAWfZf0CSrpgt+y3Pn4tj4qtUChvEgZ4pO2F6vQ3wGliUjh9YydVlYGgmCg==",
           "dev": true
         },
         "estree-walker": {
@@ -1225,6 +1280,12 @@
       "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
       "dev": true
     },
+    "arrify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
+      "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
+      "dev": true
+    },
     "asap": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
@@ -1256,6 +1317,12 @@
       "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
       "dev": true
     },
+    "astral-regex": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
+      "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
+      "dev": true
+    },
     "astring": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/astring/-/astring-1.7.5.tgz",
@@ -1263,15 +1330,15 @@
       "dev": true
     },
     "astro": {
-      "version": "0.18.5",
-      "resolved": "https://registry.npmjs.org/astro/-/astro-0.18.5.tgz",
-      "integrity": "sha512-RS83tHFWjCXQJ4I2K54o4lnL4SmPu359mrHLaVxrue0AStIZdFT/SHmaYoIAIZTyXIit/m8iVJhyjmP18yYOmg==",
+      "version": "0.18.9",
+      "resolved": "https://registry.npmjs.org/astro/-/astro-0.18.9.tgz",
+      "integrity": "sha512-sReknFVWVZS/dZCitRl24Xb1BPEja6Lq/Gbli5xEx+/ac5I8H1Ie7uw4uodoOLXmM8Oe6zRDrpSJrZF89cTYxw==",
       "dev": true,
       "requires": {
         "@astrojs/markdown-support": "0.2.3",
         "@astrojs/parser": "0.18.5",
         "@astrojs/prism": "0.2.2",
-        "@astrojs/renderer-preact": "0.2.0",
+        "@astrojs/renderer-preact": "0.2.1",
         "@astrojs/renderer-react": "0.2.0",
         "@astrojs/renderer-svelte": "0.1.1",
         "@astrojs/renderer-vue": "0.1.6",
@@ -1318,6 +1385,7 @@
         "slash": "^4.0.0",
         "snowpack": "^3.8.3",
         "string-width": "^5.0.0",
+        "supports-esm": "^1.0.0",
         "tiny-glob": "^0.2.8",
         "unified": "^9.2.1",
         "yargs-parser": "^20.2.7"
@@ -1597,6 +1665,31 @@
         "tslib": "^2.0.3"
       }
     },
+    "camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "dev": true
+    },
+    "camelcase-keys": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz",
+      "integrity": "sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==",
+      "dev": true,
+      "requires": {
+        "camelcase": "^5.3.1",
+        "map-obj": "^4.0.0",
+        "quick-lru": "^4.0.1"
+      },
+      "dependencies": {
+        "quick-lru": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz",
+          "integrity": "sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==",
+          "dev": true
+        }
+      }
+    },
     "caniuse-lite": {
       "version": "1.0.30001248",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001248.tgz",
@@ -1732,6 +1825,15 @@
       "integrity": "sha512-t+4/y50K/+4xcCRosKkA7W4gTr1MySvLV0q+PxmG7FJ5g+66ChKurYjxBCjHggHH3HA5Hh9cy+lcUGWDqVH+4Q==",
       "dev": true
     },
+    "clone-regexp": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/clone-regexp/-/clone-regexp-2.2.0.tgz",
+      "integrity": "sha512-beMpP7BOtTipFuW8hrJvREQ2DrRu3BE7by0ZpibtfBA+qfHYvMGTc2Yb1JMYPKg/JUw0CHYvpg796aNTSW9z7Q==",
+      "dev": true,
+      "requires": {
+        "is-regexp": "^2.0.0"
+      }
+    },
     "clone-response": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.2.tgz",
@@ -1934,6 +2036,30 @@
       "integrity": "sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI=",
       "dev": true
     },
+    "decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
+      "dev": true
+    },
+    "decamelize-keys": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/decamelize-keys/-/decamelize-keys-1.1.0.tgz",
+      "integrity": "sha1-0XGoeTMlKAfrPLYdwcFEXQeN8tk=",
+      "dev": true,
+      "requires": {
+        "decamelize": "^1.1.0",
+        "map-obj": "^1.0.0"
+      },
+      "dependencies": {
+        "map-obj": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
+          "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
+          "dev": true
+        }
+      }
+    },
     "decompress-response": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
@@ -2198,9 +2324,9 @@
       "dev": true
     },
     "esbuild": {
-      "version": "0.12.17",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.12.17.tgz",
-      "integrity": "sha512-GshKJyVYUnlSXIZj/NheC2O0Kblh42CS7P1wJyTbbIHevTG4jYMS9NNw8EOd8dDWD0dzydYHS01MpZoUcQXB4g==",
+      "version": "0.12.19",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.12.19.tgz",
+      "integrity": "sha512-5NuT1G6THW7l3fsSCDkcPepn24R0XtyPjKoqKHD8LfhqMXzCdz0mrS9HgO6hIhzVT7zt0T+JGbzCqF5AH8hS9w==",
       "dev": true
     },
     "escalade": {
@@ -2341,6 +2467,15 @@
         "strip-final-newline": "^2.0.0"
       }
     },
+    "execall": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/execall/-/execall-2.0.0.tgz",
+      "integrity": "sha512-0FU2hZ5Hh6iQnarpRtQurM/aAvp3RIbfvgLHrcqJYzhXyV2KFruhuChf9NC6waAhiUR7FFtlugkI4p7f2Fqlow==",
+      "dev": true,
+      "requires": {
+        "clone-regexp": "^2.1.0"
+      }
+    },
     "extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -2399,6 +2534,12 @@
       "integrity": "sha512-4pXwmBplsCPv8FOY1WRakF970TjNGnGnfbOnLqjlYvMiF1SR3yOHyxMR/YCXpPTOspNF5gwudqktIP4VsWkvBg==",
       "dev": true
     },
+    "fastest-levenshtein": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz",
+      "integrity": "sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==",
+      "dev": true
+    },
     "fastq": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.11.1.tgz",
@@ -2414,6 +2555,15 @@
       "integrity": "sha512-IgTtZwL52tx2wqWeuGDzXYTnNsEjNLahZpJw30hCQDyVnoHXwY5acNDnjGImTTL1R0z1PCyLw20VAbE5qLic3Q==",
       "dev": true
     },
+    "file-entry-cache": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "dev": true,
+      "requires": {
+        "flat-cache": "^3.0.4"
+      }
+    },
     "fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -2468,6 +2618,22 @@
         "path-exists": "^4.0.0"
       }
     },
+    "flat-cache": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
+      "integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==",
+      "dev": true,
+      "requires": {
+        "flatted": "^3.1.0",
+        "rimraf": "^3.0.2"
+      }
+    },
+    "flatted": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.2.tgz",
+      "integrity": "sha512-JaTY/wtrcSyvXJl4IMFHPKyFur1sE9AUqc0QnhOaJ0CxHtAoIV8pYDzeEfAaNEtGkOfq4gr3LBFmdXW5mOQFnA==",
+      "dev": true
+    },
     "forever-agent": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
@@ -2578,6 +2744,12 @@
       "integrity": "sha512-g/Q1aTSDOxFpchXC4i8ZWvxA1lnPqx/JHqcpIw0/LX9T8x/GBbi6YnlN5nhaKIFkT8oFsscUKgDJYxfwfS6QsQ==",
       "dev": true
     },
+    "get-stdin": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-8.0.0.tgz",
+      "integrity": "sha512-sY22aA6xchAzprjyqmSEQv4UbAAzRN0L2dQB0NlN5acTTK9Don6nhoc3eAbUnpZiCANAMfd/+40kVdKfFygohg==",
+      "dev": true
+    },
     "get-stream": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
@@ -2625,6 +2797,37 @@
         "is-glob": "^4.0.1"
       }
     },
+    "global-modules": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz",
+      "integrity": "sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==",
+      "dev": true,
+      "requires": {
+        "global-prefix": "^3.0.0"
+      }
+    },
+    "global-prefix": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-3.0.0.tgz",
+      "integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==",
+      "dev": true,
+      "requires": {
+        "ini": "^1.3.5",
+        "kind-of": "^6.0.2",
+        "which": "^1.3.1"
+      },
+      "dependencies": {
+        "which": {
+          "version": "1.3.1",
+          "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+          "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+          "dev": true,
+          "requires": {
+            "isexe": "^2.0.0"
+          }
+        }
+      }
+    },
     "globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -2659,12 +2862,27 @@
         }
       }
     },
+    "globjoin": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/globjoin/-/globjoin-0.1.4.tgz",
+      "integrity": "sha1-L0SUrIkZ43Z8XLtpHp9GMyQoXUM=",
+      "dev": true
+    },
     "globrex": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
       "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
       "dev": true
     },
+    "gonzales-pe": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/gonzales-pe/-/gonzales-pe-4.3.0.tgz",
+      "integrity": "sha512-otgSPpUmdWJ43VXyiNgEYE4luzHCL2pz4wQ0OnDluC6Eg4Ko3Vexy/SrSynglw/eR+OhkzmqFCZa/OFa/RgAOQ==",
+      "dev": true,
+      "requires": {
+        "minimist": "^1.2.5"
+      }
+    },
     "got": {
       "version": "11.8.2",
       "resolved": "https://registry.npmjs.org/got/-/got-11.8.2.tgz",
@@ -2685,9 +2903,9 @@
       }
     },
     "graceful-fs": {
-      "version": "4.2.6",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
-      "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==",
+      "version": "4.2.8",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz",
+      "integrity": "sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==",
       "dev": true
     },
     "gray-matter": {
@@ -2727,6 +2945,12 @@
         "har-schema": "^2.0.0"
       }
     },
+    "hard-rejection": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/hard-rejection/-/hard-rejection-2.1.0.tgz",
+      "integrity": "sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==",
+      "dev": true
+    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -2742,6 +2966,15 @@
       "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
       "dev": true
     },
+    "has-package-exports": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/has-package-exports/-/has-package-exports-1.2.3.tgz",
+      "integrity": "sha512-lkLLwrNNaRsmwj+TylZJh1o3YlzLfgrl9fZKOAMj4MHjbvt7wy1J0icE6jD36dzkA0aQGoNuqY0hVN2uuPfPBA==",
+      "dev": true,
+      "requires": {
+        "@ljharb/has-package-exports-patterns": "0.0.1"
+      }
+    },
     "has-unicode": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
@@ -2903,6 +3136,12 @@
         }
       }
     },
+    "html-tags": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz",
+      "integrity": "sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==",
+      "dev": true
+    },
     "html-void-elements": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-1.0.5.tgz",
@@ -3063,6 +3302,12 @@
         "resolve-from": "^5.0.0"
       }
     },
+    "import-lazy": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-4.0.0.tgz",
+      "integrity": "sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==",
+      "dev": true
+    },
     "imurmurhash": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
@@ -3097,6 +3342,12 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "dev": true
     },
+    "ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "dev": true
+    },
     "inline-style-parser": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.1.1.tgz",
@@ -3254,6 +3505,12 @@
         "@types/estree": "*"
       }
     },
+    "is-regexp": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-2.1.0.tgz",
+      "integrity": "sha512-OZ4IlER3zmRIoB9AqNhEggVxqIH4ofDns5nRrPS6yQxXE1TPCUpFznBfRQmQa8uC+pXqjMnukiJBxCisIxiLGA==",
+      "dev": true
+    },
     "is-stream": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
@@ -3266,6 +3523,12 @@
       "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
       "dev": true
     },
+    "is-unicode-supported": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
+      "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==",
+      "dev": true
+    },
     "is-valid-identifier": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-valid-identifier/-/is-valid-identifier-2.0.2.tgz",
@@ -3466,6 +3729,12 @@
       "integrity": "sha512-8QADVssbrFjivHWQU7KkMgptGTl6WAcSdlbBPY4uNF+mWr6DGcKrvY2w4FQJoXch7+fKMjj0dRrL75vk3k23OA==",
       "dev": true
     },
+    "known-css-properties": {
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.21.0.tgz",
+      "integrity": "sha512-sZLUnTqimCkvkgRS+kbPlYW5o8q5w1cu+uIisKpEWkj31I8mx8kNG162DwRav8Zirkva6N5uoFsm9kzK4mUXjw==",
+      "dev": true
+    },
     "lilconfig": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.3.tgz",
@@ -3504,12 +3773,91 @@
         "p-locate": "^5.0.0"
       }
     },
+    "lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true
+    },
     "lodash.camelcase": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
       "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
       "dev": true
     },
+    "lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
+      "dev": true
+    },
+    "lodash.truncate": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
+      "integrity": "sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=",
+      "dev": true
+    },
+    "log-symbols": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.1.0.tgz",
+      "integrity": "sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==",
+      "dev": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "is-unicode-supported": "^0.1.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "longest-streak": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-2.0.4.tgz",
@@ -3616,6 +3964,12 @@
         }
       }
     },
+    "map-obj": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.2.1.tgz",
+      "integrity": "sha512-+WA2/1sPmDj1dlvvJmB5G6JKfY9dpn7EVBUL06+y6PoljPkh+6V1QihwxNkbcGxCRjt2b0F9K0taiCuo7MbdFQ==",
+      "dev": true
+    },
     "markdown-table": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-2.0.0.tgz",
@@ -3625,6 +3979,12 @@
         "repeat-string": "^1.0.0"
       }
     },
+    "mathml-tag-names": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz",
+      "integrity": "sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==",
+      "dev": true
+    },
     "mdast-util-definitions": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/mdast-util-definitions/-/mdast-util-definitions-4.0.0.tgz",
@@ -3798,6 +4158,26 @@
       "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=",
       "dev": true
     },
+    "meow": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/meow/-/meow-9.0.0.tgz",
+      "integrity": "sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==",
+      "dev": true,
+      "requires": {
+        "@types/minimist": "^1.2.0",
+        "camelcase-keys": "^6.2.2",
+        "decamelize": "^1.2.0",
+        "decamelize-keys": "^1.1.0",
+        "hard-rejection": "^2.1.0",
+        "minimist-options": "4.1.0",
+        "normalize-package-data": "^3.0.0",
+        "read-pkg-up": "^7.0.1",
+        "redent": "^3.0.0",
+        "trim-newlines": "^3.0.0",
+        "type-fest": "^0.18.0",
+        "yargs-parser": "^20.2.3"
+      }
+    },
     "merge-source-map": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/merge-source-map/-/merge-source-map-1.1.0.tgz",
@@ -3979,9 +4359,9 @@
       }
     },
     "micromark-util-character": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-1.0.0.tgz",
-      "integrity": "sha512-VdfDsHtUn/ocN2hGBkMunHHWcaN33llgwU0bmw2LA0tY1JvVkjHGvdiQSIk0pS3XeGCJLT6syS5i8y+1xbwDnQ==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-1.1.0.tgz",
+      "integrity": "sha512-agJ5B3unGNJ9rJvADMJ5ZiYjBRyDpzKAOk01Kpi1TKhlT1APx3XZk6eN7RtSz1erbWHC2L8T3xLZ81wdtGRZzg==",
       "dev": true,
       "requires": {
         "micromark-util-symbol": "^1.0.0",
@@ -4104,6 +4484,25 @@
       "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
       "dev": true
     },
+    "minimist-options": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-4.1.0.tgz",
+      "integrity": "sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==",
+      "dev": true,
+      "requires": {
+        "arrify": "^1.0.1",
+        "is-plain-obj": "^1.1.0",
+        "kind-of": "^6.0.3"
+      },
+      "dependencies": {
+        "is-plain-obj": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
+          "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4=",
+          "dev": true
+        }
+      }
+    },
     "minipass": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.3.tgz",
@@ -4303,6 +4702,18 @@
         "abbrev": "1"
       }
     },
+    "normalize-package-data": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.2.tgz",
+      "integrity": "sha512-6CdZocmfGaKnIHPVFhJJZ3GuR8SsLKvDANFp47Jmy51aKIr8akjAWTSxtpI+MBgBFdSMRyo4hMpDlT6dTffgZg==",
+      "dev": true,
+      "requires": {
+        "hosted-git-info": "^4.0.1",
+        "resolve": "^1.20.0",
+        "semver": "^7.3.4",
+        "validate-npm-package-license": "^3.0.1"
+      }
+    },
     "normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -4315,6 +4726,12 @@
       "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
       "dev": true
     },
+    "normalize-selector": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/normalize-selector/-/normalize-selector-0.2.0.tgz",
+      "integrity": "sha1-0LFF62kRicY6eNIB3E/bEpPvDAM=",
+      "dev": true
+    },
     "normalize-url": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
@@ -4424,6 +4841,12 @@
         "boolbase": "^1.0.0"
       }
     },
+    "num2fraction": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
+      "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
+      "dev": true
+    },
     "number-is-nan": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
@@ -4835,6 +5258,97 @@
         "source-map-js": "^0.6.2"
       }
     },
+    "postcss-html": {
+      "version": "0.36.0",
+      "resolved": "https://registry.npmjs.org/postcss-html/-/postcss-html-0.36.0.tgz",
+      "integrity": "sha512-HeiOxGcuwID0AFsNAL0ox3mW6MHH5cstWN1Z3Y+n6H+g12ih7LHdYxWwEA/QmrebctLjo79xz9ouK3MroHwOJw==",
+      "dev": true,
+      "requires": {
+        "htmlparser2": "^3.10.0"
+      },
+      "dependencies": {
+        "dom-serializer": {
+          "version": "0.2.2",
+          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
+          "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==",
+          "dev": true,
+          "requires": {
+            "domelementtype": "^2.0.1",
+            "entities": "^2.0.0"
+          },
+          "dependencies": {
+            "domelementtype": {
+              "version": "2.2.0",
+              "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+              "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
+              "dev": true
+            },
+            "entities": {
+              "version": "2.2.0",
+              "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+              "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+              "dev": true
+            }
+          }
+        },
+        "domelementtype": {
+          "version": "1.3.1",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
+          "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==",
+          "dev": true
+        },
+        "domhandler": {
+          "version": "2.4.2",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
+          "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
+          "dev": true,
+          "requires": {
+            "domelementtype": "1"
+          }
+        },
+        "domutils": {
+          "version": "1.7.0",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
+          "integrity": "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==",
+          "dev": true,
+          "requires": {
+            "dom-serializer": "0",
+            "domelementtype": "1"
+          }
+        },
+        "entities": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
+          "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==",
+          "dev": true
+        },
+        "htmlparser2": {
+          "version": "3.10.1",
+          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
+          "integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==",
+          "dev": true,
+          "requires": {
+            "domelementtype": "^1.3.1",
+            "domhandler": "^2.3.0",
+            "domutils": "^1.5.1",
+            "entities": "^1.1.1",
+            "inherits": "^2.0.1",
+            "readable-stream": "^3.1.1"
+          }
+        },
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "dev": true,
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        }
+      }
+    },
     "postcss-icss-keyframes": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/postcss-icss-keyframes/-/postcss-icss-keyframes-0.2.1.tgz",
@@ -4874,16 +5388,53 @@
         }
       }
     },
-    "postcss-load-config": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.0.tgz",
-      "integrity": "sha512-ipM8Ds01ZUophjDTQYSVP70slFSYg3T0/zyfII5vzhN6V57YSxMgG5syXuwi5VtS8wSf3iL30v0uBdoIVx4Q0g==",
+    "postcss-less": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/postcss-less/-/postcss-less-3.1.4.tgz",
+      "integrity": "sha512-7TvleQWNM2QLcHqvudt3VYjULVB49uiW6XzEUFmvwHzvsOEF5MwBrIXZDJQvJNFGjJQTzSzZnDoCJ8h/ljyGXA==",
       "dev": true,
       "requires": {
-        "import-cwd": "^3.0.0",
-        "lilconfig": "^2.0.3",
-        "yaml": "^1.10.2"
-      }
+        "postcss": "^7.0.14"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-load-config": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.0.tgz",
+      "integrity": "sha512-ipM8Ds01ZUophjDTQYSVP70slFSYg3T0/zyfII5vzhN6V57YSxMgG5syXuwi5VtS8wSf3iL30v0uBdoIVx4Q0g==",
+      "dev": true,
+      "requires": {
+        "import-cwd": "^3.0.0",
+        "lilconfig": "^2.0.3",
+        "yaml": "^1.10.2"
+      }
+    },
+    "postcss-media-query-parser": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz",
+      "integrity": "sha1-J7Ocb02U+Bsac7j3Y1HGCeXO8kQ=",
+      "dev": true
     },
     "postcss-modules": {
       "version": "4.2.2",
@@ -4936,6 +5487,106 @@
         "icss-utils": "^5.0.0"
       }
     },
+    "postcss-resolve-nested-selector": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz",
+      "integrity": "sha1-Kcy8fDfe36wwTp//C/FZaz9qDk4=",
+      "dev": true
+    },
+    "postcss-safe-parser": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-4.0.2.tgz",
+      "integrity": "sha512-Uw6ekxSWNLCPesSv/cmqf2bY/77z11O7jZGPax3ycZMFU/oi2DMH9i89AdHc1tRwFg/arFoEwX0IS3LCUxJh1g==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.26"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-sass": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/postcss-sass/-/postcss-sass-0.4.4.tgz",
+      "integrity": "sha512-BYxnVYx4mQooOhr+zer0qWbSPYnarAy8ZT7hAQtbxtgVf8gy+LSLT/hHGe35h14/pZDTw1DsxdbrwxBN++H+fg==",
+      "dev": true,
+      "requires": {
+        "gonzales-pe": "^4.3.0",
+        "postcss": "^7.0.21"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "postcss-scss": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-2.1.1.tgz",
+      "integrity": "sha512-jQmGnj0hSGLd9RscFw9LyuSVAa5Bl1/KBPqG1NQw9w8ND55nY4ZEsdlVuYJvLPpV+y0nwTV5v/4rHPzZRihQbA==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.6"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "postcss-selector-parser": {
       "version": "6.0.6",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz",
@@ -4946,6 +5597,12 @@
         "util-deprecate": "^1.0.2"
       }
     },
+    "postcss-syntax": {
+      "version": "0.36.2",
+      "resolved": "https://registry.npmjs.org/postcss-syntax/-/postcss-syntax-0.36.2.tgz",
+      "integrity": "sha512-nBRg/i7E3SOHWxF3PpF5WnJM/jQ1YpY9000OaVXlAQj6Zp/kIqJxEDWIZ67tAd7NLuk7zqN4yqe9nc0oNAOs1w==",
+      "dev": true
+    },
     "postcss-value-parser": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
@@ -5114,6 +5771,106 @@
         "npm-normalize-package-bin": "^1.0.1"
       }
     },
+    "read-pkg": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
+      "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==",
+      "dev": true,
+      "requires": {
+        "@types/normalize-package-data": "^2.4.0",
+        "normalize-package-data": "^2.5.0",
+        "parse-json": "^5.0.0",
+        "type-fest": "^0.6.0"
+      },
+      "dependencies": {
+        "hosted-git-info": {
+          "version": "2.8.9",
+          "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
+          "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
+          "dev": true
+        },
+        "normalize-package-data": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
+          "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
+          "dev": true,
+          "requires": {
+            "hosted-git-info": "^2.1.4",
+            "resolve": "^1.10.0",
+            "semver": "2 || 3 || 4 || 5",
+            "validate-npm-package-license": "^3.0.1"
+          }
+        },
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true
+        },
+        "type-fest": {
+          "version": "0.6.0",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
+          "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
+          "dev": true
+        }
+      }
+    },
+    "read-pkg-up": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-7.0.1.tgz",
+      "integrity": "sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==",
+      "dev": true,
+      "requires": {
+        "find-up": "^4.1.0",
+        "read-pkg": "^5.2.0",
+        "type-fest": "^0.8.1"
+      },
+      "dependencies": {
+        "find-up": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+          "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^5.0.0",
+            "path-exists": "^4.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+          "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+          "dev": true,
+          "requires": {
+            "p-locate": "^4.1.0"
+          }
+        },
+        "p-limit": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+          "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+          "dev": true,
+          "requires": {
+            "p-try": "^2.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+          "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+          "dev": true,
+          "requires": {
+            "p-limit": "^2.2.0"
+          }
+        },
+        "type-fest": {
+          "version": "0.8.1",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
+          "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
+          "dev": true
+        }
+      }
+    },
     "readable-stream": {
       "version": "2.3.7",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
@@ -5150,6 +5907,27 @@
         "picomatch": "^2.2.1"
       }
     },
+    "redent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
+      "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+      "dev": true,
+      "requires": {
+        "indent-string": "^4.0.0",
+        "strip-indent": "^3.0.0"
+      },
+      "dependencies": {
+        "strip-indent": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+          "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+          "dev": true,
+          "requires": {
+            "min-indent": "^1.0.0"
+          }
+        }
+      }
+    },
     "rehype-raw": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/rehype-raw/-/rehype-raw-5.1.0.tgz",
@@ -5168,6 +5946,17 @@
         "hast-util-to-html": "^7.1.1"
       }
     },
+    "remark": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/remark/-/remark-13.0.0.tgz",
+      "integrity": "sha512-HDz1+IKGtOyWN+QgBiAT0kn+2s6ovOxHyPAFGKVE81VSzJ+mq7RwHFledEvB5F1p4iJvOah/LOKdFuzvRnNLCA==",
+      "dev": true,
+      "requires": {
+        "remark-parse": "^9.0.0",
+        "remark-stringify": "^9.0.0",
+        "unified": "^9.1.0"
+      }
+    },
     "remark-footnotes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/remark-footnotes/-/remark-footnotes-3.0.0.tgz",
@@ -5236,6 +6025,15 @@
         }
       }
     },
+    "remark-stringify": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-9.0.1.tgz",
+      "integrity": "sha512-mWmNg3ZtESvZS8fv5PTvaPckdL4iNlCHTt8/e/8oN08nArHRHjNZMKzA/YW3+p7/lYqIw4nx1XsjCBo/AxNChg==",
+      "dev": true,
+      "requires": {
+        "mdast-util-to-markdown": "^0.6.0"
+      }
+    },
     "repeat-string": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
@@ -5270,6 +6068,12 @@
         "uuid": "^3.3.2"
       }
     },
+    "require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true
+    },
     "require-relative": {
       "version": "0.8.7",
       "resolved": "https://registry.npmjs.org/require-relative/-/require-relative-0.8.7.tgz",
@@ -5403,9 +6207,9 @@
       }
     },
     "rollup": {
-      "version": "2.55.1",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.55.1.tgz",
-      "integrity": "sha512-1P9w5fpb6b4qroePh8vHKGIvPNxwoCQhjJpIqfZGHLKpZ0xcU2/XBmFxFbc9697/6bmHpmFTLk5R1dAQhFSo0g==",
+      "version": "2.56.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.56.0.tgz",
+      "integrity": "sha512-weEafgbjbHCnrtJPNyCrhYnjP62AkF04P0BcV/1mofy1+gytWln4VVB1OK462cq2EAyWzRDpTMheSP/o+quoiA==",
       "dev": true,
       "requires": {
         "fsevents": "~2.3.2"
@@ -5481,9 +6285,9 @@
       "dev": true
     },
     "sass": {
-      "version": "1.37.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.37.0.tgz",
-      "integrity": "sha512-B+Tu6cSAG8ffs/cqsZl/bgSH2pCmavDaPTYAoW8QA1qNHh/RqndNfVKuABKYkLjUQ5aq/BnCENVpE80cqdSM1w==",
+      "version": "1.37.5",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.37.5.tgz",
+      "integrity": "sha512-Cx3ewxz9QB/ErnVIiWg2cH0kiYZ0FPvheDTVC6BsiEGBTZKKZJ1Gq5Kq6jy3PKtL6+EJ8NIoaBW/RSd2R6cZOA==",
       "dev": true,
       "requires": {
         "chokidar": ">=3.0.0 <4.0.0"
@@ -5603,10 +6407,53 @@
       "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==",
       "dev": true
     },
+    "slice-ansi": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz",
+      "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^4.0.0",
+        "astral-regex": "^2.0.0",
+        "is-fullwidth-code-point": "^3.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+          "dev": true
+        }
+      }
+    },
     "smart-buffer": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.1.0.tgz",
-      "integrity": "sha512-iVICrxOzCynf/SNaBQCw34eM9jROU/s5rzIhpOvzhzuYHfJR/DhZfDkXiZSgKXfgv26HT3Yni3AV/DGw0cGnnw==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
+      "integrity": "sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==",
       "dev": true
     },
     "snowpack": {
@@ -5773,6 +6620,44 @@
       "integrity": "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==",
       "dev": true
     },
+    "spdx-correct": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz",
+      "integrity": "sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==",
+      "dev": true,
+      "requires": {
+        "spdx-expression-parse": "^3.0.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "spdx-exceptions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
+      "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==",
+      "dev": true
+    },
+    "spdx-expression-parse": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
+      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
+      "dev": true,
+      "requires": {
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "spdx-license-ids": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.9.tgz",
+      "integrity": "sha512-Ki212dKK4ogX+xDo4CtOZBVIwhsKBEfsEEcwmJfLQzirgc2jIWdzg40Unxz/HzEUqM1WFzVlQSMF9kZZ2HboLQ==",
+      "dev": true
+    },
+    "specificity": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/specificity/-/specificity-0.4.1.tgz",
+      "integrity": "sha512-1klA3Gi5PD1Wv9Q0wUoOQN1IWAuPu0D1U03ThXTr0cJ20+/iq2tHSDnK7Kk/0LXJ1ztUB2/1Os0wKmfyNgUQfg==",
+      "dev": true
+    },
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -5915,6 +6800,12 @@
         "min-indent": "^1.0.1"
       }
     },
+    "style-search": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz",
+      "integrity": "sha1-eVjHk+R+MuB9K1yv5cC/jhLneQI=",
+      "dev": true
+    },
     "style-to-object": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.3.0.tgz",
@@ -5924,6 +6815,261 @@
         "inline-style-parser": "0.1.1"
       }
     },
+    "stylelint": {
+      "version": "13.13.1",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-13.13.1.tgz",
+      "integrity": "sha512-Mv+BQr5XTUrKqAXmpqm6Ddli6Ief+AiPZkRsIrAoUKFuq/ElkUh9ZMYxXD0iQNZ5ADghZKLOWz1h7hTClB7zgQ==",
+      "dev": true,
+      "requires": {
+        "@stylelint/postcss-css-in-js": "^0.37.2",
+        "@stylelint/postcss-markdown": "^0.36.2",
+        "autoprefixer": "^9.8.6",
+        "balanced-match": "^2.0.0",
+        "chalk": "^4.1.1",
+        "cosmiconfig": "^7.0.0",
+        "debug": "^4.3.1",
+        "execall": "^2.0.0",
+        "fast-glob": "^3.2.5",
+        "fastest-levenshtein": "^1.0.12",
+        "file-entry-cache": "^6.0.1",
+        "get-stdin": "^8.0.0",
+        "global-modules": "^2.0.0",
+        "globby": "^11.0.3",
+        "globjoin": "^0.1.4",
+        "html-tags": "^3.1.0",
+        "ignore": "^5.1.8",
+        "import-lazy": "^4.0.0",
+        "imurmurhash": "^0.1.4",
+        "known-css-properties": "^0.21.0",
+        "lodash": "^4.17.21",
+        "log-symbols": "^4.1.0",
+        "mathml-tag-names": "^2.1.3",
+        "meow": "^9.0.0",
+        "micromatch": "^4.0.4",
+        "normalize-selector": "^0.2.0",
+        "postcss": "^7.0.35",
+        "postcss-html": "^0.36.0",
+        "postcss-less": "^3.1.4",
+        "postcss-media-query-parser": "^0.2.3",
+        "postcss-resolve-nested-selector": "^0.1.1",
+        "postcss-safe-parser": "^4.0.2",
+        "postcss-sass": "^0.4.4",
+        "postcss-scss": "^2.1.1",
+        "postcss-selector-parser": "^6.0.5",
+        "postcss-syntax": "^0.36.2",
+        "postcss-value-parser": "^4.1.0",
+        "resolve-from": "^5.0.0",
+        "slash": "^3.0.0",
+        "specificity": "^0.4.1",
+        "string-width": "^4.2.2",
+        "strip-ansi": "^6.0.0",
+        "style-search": "^0.1.0",
+        "sugarss": "^2.0.0",
+        "svg-tags": "^1.0.0",
+        "table": "^6.6.0",
+        "v8-compile-cache": "^2.3.0",
+        "write-file-atomic": "^3.0.3"
+      },
+      "dependencies": {
+        "autoprefixer": {
+          "version": "9.8.6",
+          "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.6.tgz",
+          "integrity": "sha512-XrvP4VVHdRBCdX1S3WXVD8+RyG9qeb1D5Sn1DeLiG2xfSpzellk5k54xbUERJ3M5DggQxes39UGOTP8CFrEGbg==",
+          "dev": true,
+          "requires": {
+            "browserslist": "^4.12.0",
+            "caniuse-lite": "^1.0.30001109",
+            "colorette": "^1.2.1",
+            "normalize-range": "^0.1.2",
+            "num2fraction": "^1.2.2",
+            "postcss": "^7.0.32",
+            "postcss-value-parser": "^4.1.0"
+          }
+        },
+        "balanced-match": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-2.0.0.tgz",
+          "integrity": "sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==",
+          "dev": true
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          },
+          "dependencies": {
+            "ansi-styles": {
+              "version": "4.3.0",
+              "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+              "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+              "dev": true,
+              "requires": {
+                "color-convert": "^2.0.1"
+              }
+            },
+            "has-flag": {
+              "version": "4.0.0",
+              "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+              "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+              "dev": true
+            },
+            "supports-color": {
+              "version": "7.2.0",
+              "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+              "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+              "dev": true,
+              "requires": {
+                "has-flag": "^4.0.0"
+              }
+            }
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "emoji-regex": {
+          "version": "8.0.0",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+          "dev": true
+        },
+        "escape-string-regexp": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+          "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          },
+          "dependencies": {
+            "chalk": {
+              "version": "2.4.2",
+              "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+              "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+              "dev": true,
+              "requires": {
+                "ansi-styles": "^3.2.1",
+                "escape-string-regexp": "^1.0.5",
+                "supports-color": "^5.3.0"
+              },
+              "dependencies": {
+                "supports-color": {
+                  "version": "5.5.0",
+                  "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+                  "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+                  "dev": true,
+                  "requires": {
+                    "has-flag": "^3.0.0"
+                  }
+                }
+              }
+            }
+          }
+        },
+        "slash": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+          "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+          "dev": true
+        },
+        "string-width": {
+          "version": "4.2.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
+          "integrity": "sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^8.0.0",
+            "is-fullwidth-code-point": "^3.0.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "stylelint-config-recommended": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-5.0.0.tgz",
+      "integrity": "sha512-c8aubuARSu5A3vEHLBeOSJt1udOdS+1iue7BmJDTSXoCBmfEQmmWX+59vYIj3NQdJBY6a/QRv1ozVFpaB9jaqA==",
+      "dev": true
+    },
+    "stylelint-config-standard": {
+      "version": "22.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-22.0.0.tgz",
+      "integrity": "sha512-uQVNi87SHjqTm8+4NIP5NMAyY/arXrBgimaaT7skvRfE9u3JKXRK9KBkbr4pVmeciuCcs64kAdjlxfq6Rur7Hw==",
+      "dev": true,
+      "requires": {
+        "stylelint-config-recommended": "^5.0.0"
+      }
+    },
+    "sugarss": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/sugarss/-/sugarss-2.0.0.tgz",
+      "integrity": "sha512-WfxjozUk0UVA4jm+U1d736AUpzSrNsQcIbyOkoE364GrtWmIrFdk5lksEupgWMD4VaT/0kVx1dobpiDumSgmJQ==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "7.0.36",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
+          "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -5933,10 +7079,19 @@
         "has-flag": "^3.0.0"
       }
     },
+    "supports-esm": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-esm/-/supports-esm-1.0.0.tgz",
+      "integrity": "sha512-96Am8CDqUaC0I2+C/swJ0yEvM8ZnGn4unoers/LSdE4umhX7mELzqyLzx3HnZAluq5PXIsGMKqa7NkqaeHMPcg==",
+      "dev": true,
+      "requires": {
+        "has-package-exports": "^1.1.0"
+      }
+    },
     "svelte": {
-      "version": "3.41.0",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.41.0.tgz",
-      "integrity": "sha512-X9/lnTcRBCrMdyFBVjfmqy1T2vyN8ejUE1OfbWSccc2Z42Amn3ab3XdBgVl+oDkZvzPfPMoxo6CEbWca7pXOew==",
+      "version": "3.42.1",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.42.1.tgz",
+      "integrity": "sha512-XtExLd2JAU3T7M2g/DkO3UNj/3n1WdTXrfL63OZ5nZq7nAqd9wQw+lR4Pv/wkVbrWbAIPfLDX47UjFdmnY+YtQ==",
       "dev": true
     },
     "svelte-hmr": {
@@ -5968,10 +7123,73 @@
         }
       }
     },
+    "svg-tags": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
+      "integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=",
+      "dev": true
+    },
+    "table": {
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/table/-/table-6.7.1.tgz",
+      "integrity": "sha512-ZGum47Yi6KOOFDE8m223td53ath2enHcYLgOCjGr5ngu8bdIARQk6mN/wRMv4yMRcHnCSnHbCEha4sobQx5yWg==",
+      "dev": true,
+      "requires": {
+        "ajv": "^8.0.1",
+        "lodash.clonedeep": "^4.5.0",
+        "lodash.truncate": "^4.4.2",
+        "slice-ansi": "^4.0.0",
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "8.6.2",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.6.2.tgz",
+          "integrity": "sha512-9807RlWAgT564wT+DjeyU5OFMPjmzxVobvDFmNAhY+5zD6A2ly3jDp6sgnfyDtlIQ+7H97oc/DGCzzfu9rjw9w==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "json-schema-traverse": "^1.0.0",
+            "require-from-string": "^2.0.2",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "emoji-regex": {
+          "version": "8.0.0",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+          "dev": true
+        },
+        "json-schema-traverse": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+          "dev": true
+        },
+        "string-width": {
+          "version": "4.2.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
+          "integrity": "sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^8.0.0",
+            "is-fullwidth-code-point": "^3.0.0",
+            "strip-ansi": "^6.0.0"
+          }
+        }
+      }
+    },
     "tar": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.2.tgz",
-      "integrity": "sha512-EwKEgqJ7nJoS+s8QfLYVGMDmAsj+StbI2AM/RTHeUSsOw6Z8bwNBRv5z3CY0m7laC5qUAqruLX5AhMuc5deY3Q==",
+      "version": "6.1.6",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.6.tgz",
+      "integrity": "sha512-oaWyu5dQbHaYcyZCTfyPpC+VmI62/OM2RTUYavTk1MDr1cwW5Boi3baeYQKiZbY2uSQJGr+iMOzb/JFxLrft+g==",
       "dev": true,
       "requires": {
         "chownr": "^2.0.0",
@@ -6050,6 +7268,12 @@
       "integrity": "sha512-whw60l7r+8ZU8Tu/Uc2yxtc4ZTZbR/PF3u1IPNKGQ6p8EICLb3Z2lAgoqw9bqYd8IkgnsaOcLzYHFckjqNsf0g==",
       "dev": true
     },
+    "trim-newlines": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-3.0.1.tgz",
+      "integrity": "sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==",
+      "dev": true
+    },
     "trough": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/trough/-/trough-1.0.5.tgz",
@@ -6077,6 +7301,12 @@
       "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
       "dev": true
     },
+    "type-fest": {
+      "version": "0.18.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.18.1.tgz",
+      "integrity": "sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==",
+      "dev": true
+    },
     "typedarray-to-buffer": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
@@ -6134,6 +7364,15 @@
       "integrity": "sha512-f98yt5pnlMWlzP539tPc4grGMsFaQQlP/vM396b00jngsiINumNmsY8rkXjfoi1c6QaM8nQ3vaGDuoKWbe/1Uw==",
       "dev": true
     },
+    "unist-util-find-all-after": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/unist-util-find-all-after/-/unist-util-find-all-after-3.0.2.tgz",
+      "integrity": "sha512-xaTC/AGZ0rIM2gM28YVRAFPIZpzbpDtU3dRmp7EXlNVA8ziQc4hY3H7BHXM1J49nEmiqc3svnqMReW+PGqbZKQ==",
+      "dev": true,
+      "requires": {
+        "unist-util-is": "^4.0.0"
+      }
+    },
     "unist-util-generated": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/unist-util-generated/-/unist-util-generated-1.1.6.tgz",
@@ -6289,6 +7528,22 @@
       "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
       "dev": true
     },
+    "v8-compile-cache": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
+      "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==",
+      "dev": true
+    },
+    "validate-npm-package-license": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
+      "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
+      "dev": true,
+      "requires": {
+        "spdx-correct": "^3.0.0",
+        "spdx-expression-parse": "^3.0.0"
+      }
+    },
     "validate-npm-package-name": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-3.0.0.tgz",
@@ -6344,43 +7599,43 @@
       "dev": true
     },
     "vue": {
-      "version": "3.2.0-beta.7",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.0-beta.7.tgz",
-      "integrity": "sha512-1MAUaLvvM3k4MzzMtpevW/K0UuYz76NDm3Le3GC+C2mT+WAwBZqr7bT4FLwVPbaioVaJby8ImnVW1wmoAginPQ==",
+      "version": "3.2.0-beta.8",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.0-beta.8.tgz",
+      "integrity": "sha512-kpBYrcn1YSHrjXO4ELdLqqJ6U0JJ+ZSDaCw95cJnx+B3dH9z6oU7IdBoKXUsTStq+ppAvdKouh+kTYRxG3t/Xg==",
       "dev": true,
       "requires": {
-        "@vue/compiler-dom": "3.2.0-beta.7",
-        "@vue/runtime-dom": "3.2.0-beta.7",
-        "@vue/shared": "3.2.0-beta.7"
+        "@vue/compiler-dom": "3.2.0-beta.8",
+        "@vue/runtime-dom": "3.2.0-beta.8",
+        "@vue/shared": "3.2.0-beta.8"
       },
       "dependencies": {
         "@vue/compiler-core": {
-          "version": "3.2.0-beta.7",
-          "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.0-beta.7.tgz",
-          "integrity": "sha512-JoL8pskBqYDcw3Yf6Bm/TUz4ZIRIkT7VzMzk0chBwpxHima9roZZA2bn5M/JznZryh9JNfrpm1DdDKmsdrRVSQ==",
+          "version": "3.2.0-beta.8",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.0-beta.8.tgz",
+          "integrity": "sha512-nVJk+DMl0tY9e4FLKcxyWQEtnLwHhW9K3rq15oqNhnRGP/mk2zN1y/BDAC7hQv1MxU3RX4X8fUOw0EbzVl/vDA==",
           "dev": true,
           "requires": {
             "@babel/parser": "^7.12.0",
             "@babel/types": "^7.12.0",
-            "@vue/shared": "3.2.0-beta.7",
+            "@vue/shared": "3.2.0-beta.8",
             "estree-walker": "^2.0.1",
             "source-map": "^0.6.1"
           }
         },
         "@vue/compiler-dom": {
-          "version": "3.2.0-beta.7",
-          "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.0-beta.7.tgz",
-          "integrity": "sha512-51gwn3EaaNs1XI6D3aoPDuDmS1SxBb/HVlVZwlEYDoje6UeF3lx9M6pXOM6CoMLiFNat4CkwqQZu6SghlY0PYw==",
+          "version": "3.2.0-beta.8",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.0-beta.8.tgz",
+          "integrity": "sha512-A2RwLyUkN0jsC0fx/VOR1POzN64ZAzSFtnkhhuSs81K7MsIW0OgYmmFutqLJiycTSBXEs+yZ6J9cZPBhcfPxeg==",
           "dev": true,
           "requires": {
-            "@vue/compiler-core": "3.2.0-beta.7",
-            "@vue/shared": "3.2.0-beta.7"
+            "@vue/compiler-core": "3.2.0-beta.8",
+            "@vue/shared": "3.2.0-beta.8"
           }
         },
         "@vue/shared": {
-          "version": "3.2.0-beta.7",
-          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.0-beta.7.tgz",
-          "integrity": "sha512-rXkGVA+HeVsnB/pba3uZK9KJCwNetCupqHX5g+aXhZPucHTC0YCPoZFYc4qUE8wa8atXTBWP+1VnztbXBPGRuA==",
+          "version": "3.2.0-beta.8",
+          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.0-beta.8.tgz",
+          "integrity": "sha512-+9azBIVNUvrUDyvUk/0/yp0FZ4RjAWfZf0CSrpgt+y3Pn4tj4qtUChvEgZ4pO2F6vQ3wGliUjh9YydVlYGgmCg==",
           "dev": true
         },
         "estree-walker": {
diff --git a/package.json b/package.json
index e7a5f38..036e625 100644
--- a/package.json
+++ b/package.json
@@ -1,12 +1,14 @@
 {
-  "name": "@example/starter",
-  "version": "0.0.1",
+  "name": "accessible-astro-starter",
+  "version": "1.0.0",
   "private": true,
   "scripts": {
     "start": "astro dev",
     "build": "astro build"
   },
   "devDependencies": {
-    "astro": "^0.18.5"
+    "astro": "^0.18.9",
+    "stylelint": "^13.13.1",
+    "stylelint-config-standard": "^22.0.0"
   }
 }
diff --git a/public/.stylelintrc.json b/public/.stylelintrc.json
new file mode 100644
index 0000000..500a7d3
--- /dev/null
+++ b/public/.stylelintrc.json
@@ -0,0 +1,6 @@
+{
+  "extends": "stylelint-config-standard",
+  "rules": {
+    "at-rule-no-unknown": null
+  }
+}
diff --git a/public/assets/logo.svg b/public/assets/logo.svg
index d751556..fb226ed 100644
--- a/public/assets/logo.svg
+++ b/public/assets/logo.svg
@@ -1,12 +1,5 @@
-<svg width="193" height="256" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <style>
-        #flame { fill: #FF5D01; }
-        #a { fill: #000014; }
-        @media (prefers-color-scheme: dark) {
-            #a { fill: #fff; }
-        }
-    </style>
-    
-    <path id="a" fill-rule="evenodd" clip-rule="evenodd" d="M131.496 18.929c1.943 2.413 2.935 5.67 4.917 12.181l43.309 142.27a180.277 180.277 0 00-51.778-17.53L99.746 60.56a3.67 3.67 0 00-7.042.01l-27.857 95.232a180.224 180.224 0 00-52.01 17.557l43.52-142.281c1.989-6.502 2.983-9.752 4.927-12.16a15.999 15.999 0 016.484-4.798c2.872-1.154 6.271-1.154 13.07-1.154h31.085c6.807 0 10.211 0 13.085 1.157a16 16 0 016.488 4.806z" fill="url(#paint0_linear)"/>
-    <path id="flame" fill-rule="evenodd" clip-rule="evenodd" d="M136.678 180.151c-7.14 6.105-21.39 10.268-37.804 10.268-20.147 0-37.033-6.272-41.513-14.707-1.602 4.835-1.962 10.367-1.962 13.902 0 0-1.055 17.355 11.016 29.426 0-6.268 5.081-11.349 11.349-11.349 10.743 0 10.731 9.373 10.721 16.977v.679c0 11.542 7.054 21.436 17.086 25.606a23.27 23.27 0 01-2.339-10.2c0-11.008 6.463-15.107 13.973-19.87 5.977-3.79 12.616-8.001 17.192-16.449a31.013 31.013 0 003.744-14.82c0-3.299-.513-6.479-1.463-9.463z" />
+<svg width="45" height="30" viewBox="0 0 45 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M28.6947 14.6939C28.6947 22.3016 22.5269 28.4694 14.9192 28.4694C7.31082 28.4694 1.14368 22.3016 1.14368 14.6939C1.14368 7.08612 7.31021 0.918365 14.9192 0.918365C22.5269 0.918365 28.6947 7.08612 28.6947 14.6939V14.6939Z" fill="#68DBFF"/>
+<path d="M43.5502 14.6939C43.5502 22.3016 37.4431 28.4694 29.9094 28.4694C22.3763 28.4694 16.2698 22.3016 16.2698 14.6939C16.2698 7.08612 22.3757 0.918365 29.9094 0.918365C37.4425 0.918365 43.5502 7.08612 43.5502 14.6939Z" fill="#FF7917"/>
+<path d="M22.451 26.2298C26.2102 23.7698 28.6947 19.522 28.6947 14.6939C28.6947 9.86571 26.2108 5.61796 22.451 3.15857C20.5463 4.4194 18.9844 6.13337 17.9055 8.14668C16.8265 10.16 16.2643 12.4097 16.2692 14.6939C16.2642 16.9782 16.8264 19.228 17.9053 21.2414C18.9843 23.2548 20.5462 24.9689 22.451 26.2298V26.2298Z" fill="#5D2C02"/>
 </svg>
diff --git a/public/assets/social-preview-image.png b/public/assets/social-preview-image.png
new file mode 100644
index 0000000..fc9fd39
Binary files /dev/null and b/public/assets/social-preview-image.png differ
diff --git a/public/style/global.css b/public/style/global.css
deleted file mode 100644
index e1a3a6b..0000000
--- a/public/style/global.css
+++ /dev/null
@@ -1,28 +0,0 @@
-* {
-  box-sizing: border-box;
-  margin: 0;
-}
-
-:root {
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
-  font-size: 1rem;
-  --user-font-scale: 1rem - 16px;
-  font-size: clamp(0.875rem, 0.4626rem + 1.0309vw + var(--user-font-scale), 1.125rem);
-}
-
-body {
-  padding: 4rem 2rem;
-  width: 100%;
-  min-height: 100vh;
-  display: grid;
-  justify-content: center;
-  background: #f9fafb;
-  color: #111827;
-}
-
-@media (prefers-color-scheme: dark) {
-  body {
-    background: #111827;
-    color: #fff;
-  }
-}
diff --git a/public/style/home.css b/public/style/home.css
deleted file mode 100644
index 39de76a..0000000
--- a/public/style/home.css
+++ /dev/null
@@ -1,53 +0,0 @@
-:root {
-  --font-mono: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono',
-    'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
-  --color-light: #f3f4f6;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-light: #1f2937;
-  }
-}
-
-a {
-  color: inherit;
-}
-
-header > div {
-  font-size: clamp(2rem, -0.4742rem + 6.1856vw, 2.75rem);
-}
-
-header > div {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-header h1 {
-  font-size: 1em;
-  font-weight: 500;
-}
-header img {
-  width: 2em;
-  height: 2.667em;
-}
-
-h2 {
-  font-weight: 500;
-  font-size: clamp(1.5rem, 1rem + 1.25vw, 2rem);
-}
-
-.counter {
-  display: grid;
-  grid-auto-flow: column;
-  gap: 1em;
-  font-size: 2rem;
-  justify-content: center;
-  padding: 2rem 1rem;
-}
-
-.counter > pre {
-  text-align: center;
-  min-width: 3ch;
-}
diff --git a/public/styles/base/_auto-grid.scss b/public/styles/base/_auto-grid.scss
new file mode 100644
index 0000000..d702886
--- /dev/null
+++ b/public/styles/base/_auto-grid.scss
@@ -0,0 +1,31 @@
+/*
+ | -------------------------------------------------------------
+ |	--> auto-grid
+ | -------------------------------------------------------------
+ |
+ | 	Easy to implement column layouts with display grid.
+ |
+*/
+
+// used variables and mixins
+@use "breakpoint" as *;
+@use "space" as *;
+
+[data-auto-grid] {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: var(--gap-default);
+}
+
+@for $i from 2 through 6 {
+  [data-auto-grid="#{$i}"] {
+    @include breakpoint(medium) {
+      grid-template-columns: repeat(#{$i}, 1fr);
+    }
+  }
+}
+
+[data-grid-center] {
+  justify-items: center;
+  align-items: center;
+}
diff --git a/public/styles/base/_breakpoint.scss b/public/styles/base/_breakpoint.scss
new file mode 100644
index 0000000..20431f4
--- /dev/null
+++ b/public/styles/base/_breakpoint.scss
@@ -0,0 +1,37 @@
+/*
+ | -------------------------------------------------------------
+ |	--> breakpoint
+ | -------------------------------------------------------------
+ |
+ | 	Breakpoint mixin used in the other base files.
+ |
+*/
+
+// breakpoints map
+$breakpoints: (
+  "default": 0,
+  "small": 24em,
+  "medium": 48em,
+  "large": 75em,
+  "huge": 87.5em,
+) !default;
+
+// breakpoint mixin
+@mixin breakpoint($breakpoint) {
+  // if key is in map
+  @if map-has-key($breakpoints, $breakpoint) {
+    // set media query
+    @media (min-width: map-get($breakpoints, $breakpoint)) {
+      @content;
+    }
+  } @else if (type_of($breakpoint) == number) {
+    // set media query
+    @media (min-width: $breakpoint+"px") {
+      @content;
+    }
+  }
+  // if key is not in map or not a valid input, throw error message
+  @else {
+    @error "Not a correct value, check _base-breakpoints for availible values.";
+  }
+}
diff --git a/public/styles/base/_color.scss b/public/styles/base/_color.scss
new file mode 100644
index 0000000..dc578a1
--- /dev/null
+++ b/public/styles/base/_color.scss
@@ -0,0 +1,38 @@
+/*
+ | -------------------------------------------------------------
+ |	--> color
+ | -------------------------------------------------------------
+ |
+ | 	Color map with HSL values. Used to create Custom Properties
+ |  in _root.scss.
+ |
+*/
+
+$colors: (
+  primary-clr: (
+    100: hsl(194, 100%, 96%),
+    200: hsl(194, 100%, 80%),
+    300: hsl(194, 100%, 70%),
+    400: hsl(194, 70%, 47%),
+    500: hsl(194, 100%, 21%),
+  ),
+  secondary-clr: (
+    100: hsl(25, 100%, 75%),
+    200: hsl(25, 100%, 68%),
+    300: hsl(25, 100%, 55%),
+    400: hsl(25, 92%, 45%),
+    500: hsl(25, 100%, 32%),
+  ),
+  neutral-clr: (
+    000: hsl(0, 0%, 100%),
+    100: hsl(200, 23%, 97%),
+    200: hsl(200, 12%, 95%),
+    300: hsl(205, 12%, 88%),
+    400: hsl(209, 13%, 83%),
+    500: hsl(210, 10%, 70%),
+    600: hsl(208, 6%, 55%),
+    700: hsl(210, 8%, 31%),
+    800: hsl(212, 9%, 22%),
+    900: hsl(210, 10%, 14%),
+  ),
+);
diff --git a/public/styles/base/_elevation.scss b/public/styles/base/_elevation.scss
new file mode 100644
index 0000000..31772e9
--- /dev/null
+++ b/public/styles/base/_elevation.scss
@@ -0,0 +1,35 @@
+/*
+ | -------------------------------------------------------------
+ |	--> elevation
+ | -------------------------------------------------------------
+ |
+ |  Box-shadow mixins used as tokens in _tokens.scss
+ |
+*/
+
+// use to override other elevations
+@mixin elevation-000 {
+  box-shadow: none;
+}
+
+// levels
+@mixin elevation-100 {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+}
+
+@mixin elevation-200 {
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
+}
+
+@mixin elevation-300 {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
+}
+
+@mixin elevation-400 {
+  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
+}
+
+// use for modals
+@mixin elevation-500 {
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+}
diff --git a/public/styles/base/_font.scss b/public/styles/base/_font.scss
new file mode 100644
index 0000000..8b4d36f
--- /dev/null
+++ b/public/styles/base/_font.scss
@@ -0,0 +1,112 @@
+/*
+ | -------------------------------------------------------------
+ |	--> font
+ | -------------------------------------------------------------
+ |
+ | 	Default font declarations and sizes.
+ |
+*/
+
+// used variables and mixins
+@use "breakpoint" as *;
+@use "outline" as *;
+@use "size" as *;
+@use "space" as *;
+
+body {
+  color: var(--font-color);
+  font-family: var(--font-family-default);
+  text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+
+  *:focus {
+    @include outline;
+  }
+
+  a {
+    color: var(--action-color);
+
+    &:visited {
+      color: var(--action-color);
+    }
+
+    &:hover,
+    &:focus {
+      color: var(--action-color);
+      text-decoration: none;
+    }
+  }
+
+  // break long urls to prevent horizontal scroll
+  :where(main) a {
+    word-wrap: break-word;
+    word-break: break-word;
+  }
+
+  // headings
+  h1 {
+    @include size-30;
+
+    @include breakpoint(medium) {
+      @include size-48;
+    }
+  }
+
+  h2 {
+    @include size-24;
+
+    @include breakpoint(medium) {
+      @include size-36;
+    }
+  }
+
+  h3 {
+    @include size-24;
+
+    @include breakpoint(medium) {
+      @include size-30;
+    }
+  }
+
+  h4 {
+    @include size-20;
+
+    @include breakpoint(medium) {
+      @include size-24;
+    }
+  }
+
+  h5 {
+    @include size-18;
+
+    @include breakpoint(medium) {
+      @include size-20;
+    }
+  }
+
+  h6 {
+    @include size-16;
+
+    @include breakpoint(medium) {
+      @include size-18;
+    }
+  }
+
+  :where(h1, h2) {
+    font-family: var(--font-family-special);
+  }
+
+  h1,
+  h2 {
+    font-weight: 800;
+  }
+
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: 600;
+  }
+}
diff --git a/public/styles/base/_grid.scss b/public/styles/base/_grid.scss
new file mode 100644
index 0000000..2083e9e
--- /dev/null
+++ b/public/styles/base/_grid.scss
@@ -0,0 +1,230 @@
+/*
+ | -------------------------------------------------------------
+ |	--> grid
+ | -------------------------------------------------------------
+ |
+ | 	This file contains all the settings for making flexible
+ |	grids. Just apply a combination of these classes to build
+ | 	your own grid in the front-end.
+ |
+ |  Docs: https://www.markteekman.nl/project/flexbox-grid
+ |
+*/
+
+// used variables and mixins
+@use "sass:math";
+@use "breakpoint" as *;
+$grid-columns: 12 !default;
+$container-width: 1200px !default;
+$calc: math.div(100%, $grid-columns) !default;
+
+// default container setting
+.container {
+  margin: 0 auto;
+  padding: 0 calc(#{var(--gap-default) / 2});
+  max-width: 100%;
+
+  @include breakpoint(medium) {
+    padding: 0 calc(#{var(--gap-default)});
+  }
+
+  @include breakpoint(large) {
+    padding: 0 calc(#{var(--gap-default) / 2});
+    max-width: $container-width;
+  }
+
+  // expand container
+  &.stretch {
+    padding: 0 calc(#{var(--gap-default) / 2});
+    max-width: 100%;
+
+    @include breakpoint(medium) {
+      padding: 0 calc(#{var(--gap-default)});
+    }
+
+    @include breakpoint(large) {
+      padding: 0 calc(#{var(--gap-default) / 2});
+    }
+  }
+}
+
+// the grid
+.grid {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: calc(#{var(--gap-default)} * -1);
+
+  // cell gutters for direct descendant
+  > .cell {
+    padding-top: var(--gap-default);
+    padding-left: var(--gap-default);
+  }
+
+  @include breakpoint(default) {
+    @for $i from 1 through $grid-columns {
+      &.small-grid-#{$i} {
+        > .cell {
+          width: calc(100% / #{$i} - 2rem);
+        }
+      }
+    }
+  }
+
+  @include breakpoint(medium) {
+    @for $i from 1 through $grid-columns {
+      &.medium-grid-#{$i} {
+        > .cell {
+          width: calc(100% / #{$i} - 2rem);
+        }
+      }
+    }
+  }
+
+  @include breakpoint(large) {
+    @for $i from 1 through $grid-columns {
+      &.large-grid-#{$i} {
+        > .cell {
+          width: calc(100% / #{$i} - 2rem);
+        }
+      }
+    }
+  }
+
+  @include breakpoint(huge) {
+    @for $i from 1 through $grid-columns {
+      &.huge-grid-#{$i} {
+        > .cell {
+          width: calc(100% / #{$i} - 2rem);
+        }
+      }
+    }
+  }
+
+  &.vertical-align-top {
+    align-items: flex-start;
+  }
+
+  &.vertical-align-center {
+    align-items: center;
+  }
+
+  &.vertical-align-bottom {
+    align-items: flex-end;
+  }
+
+  &.horizontal-align-left {
+    justify-content: flex-start;
+  }
+
+  &.horizontal-align-center {
+    justify-content: center;
+  }
+
+  &.horizontal-align-right {
+    justify-content: flex-end;
+  }
+
+  // cell and columns
+  .cell {
+    flex: 0 0 100%;
+    max-width: 100%;
+
+    // grid & flex item modifiers
+    &.align-top {
+      align-self: flex-start;
+    }
+
+    &.align-center {
+      align-self: center;
+    }
+
+    &.align-bottom {
+      align-self: flex-end;
+    }
+
+    @include breakpoint(default) {
+      @for $i from 1 through $grid-columns {
+        &.small-#{$i} {
+          flex: 0 0 ($calc * $i);
+        }
+        &.offset-small-#{$i} {
+          margin-left: ($calc * $i);
+        }
+      }
+    }
+
+    @include breakpoint(medium) {
+      @for $i from 1 through $grid-columns {
+        &.medium-#{$i} {
+          flex: 0 0 ($calc * $i);
+        }
+        &.offset-medium-#{$i} {
+          margin-left: ($calc * $i);
+        }
+      }
+    }
+
+    @include breakpoint(large) {
+      @for $i from 1 through $grid-columns {
+        &.large-#{$i} {
+          flex: 0 0 ($calc * $i);
+        }
+        &.offset-large-#{$i} {
+          margin-left: ($calc * $i);
+        }
+      }
+    }
+
+    @include breakpoint(huge) {
+      @for $i from 1 through $grid-columns {
+        &.huge-#{$i} {
+          flex: 0 0 ($calc * $i);
+        }
+        &.offset-huge-#{$i} {
+          margin-left: ($calc * $i);
+        }
+      }
+    }
+  }
+
+  // grid gutters
+  &.no-gutters {
+    margin-left: 0;
+
+    // cell gutters for direct descendant
+    > .cell {
+      padding-top: 0;
+      padding-left: 0;
+    }
+  }
+
+  // nested flex grid
+  .grid {
+    margin-bottom: var(--gap-default);
+  }
+
+  // create edge to edge offsets
+  &.separate {
+    justify-content: space-between;
+  }
+
+  // cell behaviour in block grid
+  &[class*="-grid-"] {
+    margin-right: calc(#{var(--gap-default)} / -2);
+    margin-bottom: calc(#{var(--gap-default)} * -1);
+    margin-left: calc(#{var(--gap-default)} / -2);
+
+    .cell {
+      flex: 0 0 auto;
+      margin-right: calc(#{var(--gap-default)} / 2);
+      margin-bottom: var(--gap-default);
+      margin-left: calc(#{var(--gap-default)} / 2);
+      padding-left: 0;
+      padding-top: 0;
+    }
+
+    &.equal-height > .cell > * {
+      height: 100%;
+    }
+  }
+}
diff --git a/public/styles/base/_list.scss b/public/styles/base/_list.scss
new file mode 100644
index 0000000..9395500
--- /dev/null
+++ b/public/styles/base/_list.scss
@@ -0,0 +1,82 @@
+/*
+ | -------------------------------------------------------------
+ |	--> lists
+ | -------------------------------------------------------------
+ |
+ | 	A set of defaults styles for standard ordered and unordered
+ |  lists.
+ |
+*/
+
+// used variables and mixins
+@use "breakpoint" as *;
+@use "space" as *;
+
+// unordered list
+:where(main) ul {
+  padding: 0 0 0 $space-24;
+  list-style-type: none;
+
+  li {
+    position: relative;
+    margin-bottom: $space-8;
+
+    @include breakpoint(medium) {
+      margin-bottom: $space-12;
+    }
+
+    &::before {
+      position: relative;
+      z-index: 2;
+      float: left;
+      clear: both;
+      margin: 9px 10px 0 -19px;
+      width: 8px;
+      height: 8px;
+      border-radius: 60px;
+      background: var(--action-color);
+      content: "";
+    }
+  }
+
+  // nested unordered list
+  ul {
+    padding: $space-16 0 0 $space-16;
+  }
+}
+
+// ordered list increments
+:where(main) ol {
+  counter-reset: item;
+
+  li {
+    display: block;
+    margin-bottom: $space-8;
+
+    @include breakpoint(medium) {
+      margin-bottom: $space-12;
+    }
+
+    &::before {
+      content: counters(item, ".") ". ";
+      counter-increment: item;
+    }
+
+    p {
+      display: inline;
+    }
+  }
+
+  // nested ordered and unordered lists
+  ol,
+  ul {
+    margin: $space-12 0 0 $space-16;
+  }
+
+  // prevent ul li's from taking over ol li content
+  ul {
+    li::before {
+      content: "";
+    }
+  }
+}
diff --git a/public/styles/base/_outline.scss b/public/styles/base/_outline.scss
new file mode 100644
index 0000000..2dc7686
--- /dev/null
+++ b/public/styles/base/_outline.scss
@@ -0,0 +1,17 @@
+/*
+ | -------------------------------------------------------------
+ |	--> outline
+ | -------------------------------------------------------------
+ |
+ | 	Outline mixin to help with (tab)focus of different elements
+ | 	on the page.
+ |
+*/
+
+@mixin outline {
+  outline: 2px dotted var(--neutral-clr-900);
+  outline-color: var(--neutral-clr-900);
+  outline-offset: 0;
+  -webkit-box-shadow: 0 0 0 2px var(--neutral-clr-0);
+  box-shadow: 0 0 0 2px var(--neutral-clr-0);
+}
diff --git a/public/styles/base/_reset.scss b/public/styles/base/_reset.scss
new file mode 100644
index 0000000..78d62dd
--- /dev/null
+++ b/public/styles/base/_reset.scss
@@ -0,0 +1,131 @@
+/*
+ | -------------------------------------------------------------
+ |	--> reset
+ | -------------------------------------------------------------
+ |
+ | 	A set of reset declarations to prevent inconsistencies
+ | 	between browser vendors.
+ |
+*/
+
+// set box sizing and scroll behaviour
+html {
+  box-sizing: border-box;
+  scroll-behavior: smooth;
+
+  // disable smooth scroll if user has this system preference turned on
+  @media (prefers-reduced-motion: reduce) {
+    scroll-behavior: auto;
+  }
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: inherit;
+}
+
+// reset margins and paddings
+blockquote,
+body,
+figure,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+li,
+ol,
+p,
+pre,
+ul {
+  margin: 0;
+  padding: 0;
+}
+
+// lists
+ul {
+  list-style: none;
+}
+
+// forms and buttons
+button,
+input,
+select,
+textarea {
+  color: inherit;
+  letter-spacing: inherit;
+  font: inherit;
+}
+
+input[type="text"],
+textarea {
+  width: 100%;
+}
+
+fieldset {
+  padding: 0;
+  border: none;
+}
+
+legend {
+  margin-bottom: 0.5rem;
+  max-width: 100%;
+}
+
+button,
+input,
+textarea {
+  border: 1px solid gray;
+}
+
+button {
+  padding: 0.75em 1em;
+  border-radius: 0;
+  background-color: transparent;
+  line-height: 1;
+}
+
+button * {
+  pointer-events: none;
+}
+
+button:hover {
+  cursor: pointer;
+}
+
+// responsive media elements
+embed,
+iframe,
+img,
+object,
+svg,
+video {
+  display: block;
+  max-width: 100%;
+}
+
+// default table styling
+table {
+  width: 100%;
+  table-layout: fixed;
+}
+
+// hidden atribute
+[hidden] {
+  display: none !important;
+}
+
+// noscript
+noscript {
+  display: block;
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+
+// remove outline from negative tab indexes
+[tabindex="-1"] {
+  outline: none !important;
+}
diff --git a/public/styles/base/_root.scss b/public/styles/base/_root.scss
new file mode 100644
index 0000000..071058d
--- /dev/null
+++ b/public/styles/base/_root.scss
@@ -0,0 +1,44 @@
+/*
+ | -------------------------------------------------------------
+ |	--> root
+ | -------------------------------------------------------------
+ |
+ | 	Sets all custom properties (variables) to the root element.
+ |
+*/
+
+@use "color" as *;
+
+:root {
+  // colors
+  @each $color, $shades in $colors {
+    @each $shade, $value in $shades {
+      --#{$color}-#{$shade}: #{$value};
+    }
+  }
+  // border radius
+  --radius-small: 3px;
+  --radius-large: 6px;
+  // grid gap
+  --gap-default: 2rem;
+  // font measure
+  --font-measure: 70ch;
+  // font family
+  --font-family-default: "Open Sans", sans-serif;
+  --font-family-special: "Open Sans", sans-serif;
+  // light color scheme
+  --font-color: var(--neutral-clr-900);
+  --action-color: var(--secondary-clr-500);
+  --background: var(--neutral-clr-0);
+  --primary-background: var(--primary-clr-100);
+  --neutral-background: var(--neutral-clr-200);
+}
+
+// dark color scheme
+.darkmode {
+  --font-color: var(--neutral-clr-0);
+  --action-color: var(--secondary-clr-100);
+  --background: var(--neutral-clr-800);
+  --primary-background: var(--primary-clr-500);
+  --neutral-background: var(--neutral-clr-900);
+}
diff --git a/public/styles/base/_scheme.scss b/public/styles/base/_scheme.scss
new file mode 100644
index 0000000..5ce5b39
--- /dev/null
+++ b/public/styles/base/_scheme.scss
@@ -0,0 +1,26 @@
+/*
+ | -------------------------------------------------------------
+ |	--> scheme
+ | -------------------------------------------------------------
+ |
+ | 	Light and dark mode schemes used throughout the project.
+ |
+*/
+
+:root {
+  // light color scheme (default)
+  --font-color: var(--neutral-clr-900);
+  --action-color: var(--secondary-clr-500);
+  --background: var(--neutral-clr-0);
+  --primary-background: var(--primary-clr-100);
+  --neutral-background: var(--neutral-clr-200);
+}
+
+// dark color scheme overrides
+.darkmode {
+  --font-color: var(--neutral-clr-0);
+  --action-color: var(--secondary-clr-100);
+  --background: var(--neutral-clr-800);
+  --primary-background: var(--primary-clr-500);
+  --neutral-background: var(--neutral-clr-900);
+}
diff --git a/public/styles/base/_size.scss b/public/styles/base/_size.scss
new file mode 100644
index 0000000..b1ff2f1
--- /dev/null
+++ b/public/styles/base/_size.scss
@@ -0,0 +1,69 @@
+/*
+ | -------------------------------------------------------------
+ |	--> size
+ | -------------------------------------------------------------
+ |
+ |  Size mixins used in _tokens.scss and other base files.
+ |
+*/
+
+// size mixins
+@mixin size-10 {
+  font-size: 0.625rem;
+  line-height: 0.9375rem;
+}
+
+@mixin size-12 {
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+}
+
+@mixin size-14 {
+  font-size: 0.875rem;
+  line-height: 1.3125rem;
+}
+
+@mixin size-16 {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+@mixin size-18 {
+  font-size: 1.125rem;
+  line-height: 1.6875rem;
+}
+
+@mixin size-20 {
+  font-size: 1.25rem;
+  line-height: 1.875rem;
+}
+
+@mixin size-24 {
+  font-size: 1.5rem;
+  line-height: 2.25rem;
+}
+
+@mixin size-30 {
+  font-size: 1.875rem;
+  line-height: 2.8125rem;
+}
+
+@mixin size-36 {
+  font-size: 2.25rem;
+  line-height: 3.375rem;
+}
+
+@mixin size-48 {
+  font-size: 3rem;
+  line-height: 3.625rem;
+}
+
+@mixin size-60 {
+  font-size: 3.75rem;
+  line-height: 5.125rem;
+}
+
+@mixin size-72 {
+  font-size: 4.5rem;
+  line-height: 6.125rem;
+}
diff --git a/public/styles/base/_space.scss b/public/styles/base/_space.scss
new file mode 100644
index 0000000..d7ca39f
--- /dev/null
+++ b/public/styles/base/_space.scss
@@ -0,0 +1,27 @@
+/*
+ | -------------------------------------------------------------
+ |	--> space
+ | -------------------------------------------------------------
+ |
+ |  Space variables used in _tokens.scss and other base files.
+ |
+*/
+
+// space variables
+$space-2: 0.125rem;
+$space-4: 0.25rem;
+$space-8: 0.5rem;
+$space-12: 0.75rem;
+$space-16: 1rem;
+$space-24: 1.5rem;
+$space-32: 2rem;
+$space-48: 3rem;
+$space-64: 4rem;
+$space-96: 6rem;
+$space-128: 8rem;
+$space-192: 12rem;
+$space-256: 16rem;
+$space-384: 24rem;
+$space-512: 32rem;
+$space-640: 40rem;
+$space-768: 48rem;
diff --git a/public/styles/base/_utility.scss b/public/styles/base/_utility.scss
new file mode 100644
index 0000000..af4e0f9
--- /dev/null
+++ b/public/styles/base/_utility.scss
@@ -0,0 +1,320 @@
+/*
+ | -------------------------------------------------------------
+ |  --> utility
+ | -------------------------------------------------------------
+ |
+ | 	This file contains all the utility tokens which are distilled
+ |  from bases styles.
+ |
+*/
+
+// used variables and mixins
+@use "breakpoint" as *;
+@use "elevation" as *;
+@use "size" as *;
+@use "space" as *;
+
+// color tokens
+section {
+  &.color-neutral {
+    background-color: var(--neutral-background);
+  }
+
+  &.color-primary {
+    background-color: var(--primary-background);
+  }
+}
+
+// elevation tokens
+.elevation-100 {
+  @include elevation-100;
+}
+
+.elevation-200 {
+  @include elevation-200;
+}
+
+.elevation-300 {
+  @include elevation-300;
+}
+
+.elevation-400 {
+  @include elevation-400;
+}
+
+.elevation-500 {
+  @include elevation-500;
+}
+
+// screenreader only token
+.sr-only {
+  position: absolute;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  margin: 0;
+  padding: 0;
+  width: 1px;
+  height: auto;
+  border: 0;
+  white-space: nowrap;
+}
+
+// size tokens
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+a,
+code,
+pre,
+.svg-inline--fa {
+  &.size-10 {
+    @include size-10;
+
+    @include breakpoint(medium) {
+      @include size-12;
+    }
+  }
+
+  &.size-12 {
+    @include size-12;
+
+    @include breakpoint(medium) {
+      @include size-14;
+    }
+  }
+
+  &.size-14 {
+    @include size-14;
+
+    @include breakpoint(medium) {
+      @include size-16;
+    }
+  }
+
+  &.size-16 {
+    @include size-16;
+
+    @include breakpoint(medium) {
+      @include size-18;
+    }
+  }
+
+  &.size-18 {
+    @include size-18;
+
+    @include breakpoint(medium) {
+      @include size-20;
+    }
+  }
+
+  &.size-20 {
+    @include size-20;
+
+    @include breakpoint(medium) {
+      @include size-24;
+    }
+  }
+
+  &.size-24 {
+    @include size-24;
+
+    @include breakpoint(medium) {
+      @include size-30;
+    }
+  }
+
+  &.size-30 {
+    @include size-30;
+
+    @include breakpoint(medium) {
+      @include size-36;
+    }
+  }
+
+  &.size-36 {
+    @include size-36;
+
+    @include breakpoint(medium) {
+      @include size-48;
+    }
+  }
+
+  &.size-48 {
+    @include size-48;
+
+    @include breakpoint(medium) {
+      @include size-60;
+    }
+  }
+
+  &.size-60 {
+    @include size-60;
+
+    @include breakpoint(medium) {
+      @include size-72;
+    }
+  }
+
+  &.size-72 {
+    @include size-72;
+  }
+}
+
+// space tokens
+.space-2 {
+  padding: $space-2 0;
+}
+
+.space-4 {
+  padding: $space-4 0;
+
+  @include breakpoint(medium) {
+    padding: $space-8 0;
+  }
+}
+
+.space-8 {
+  padding: $space-8 0;
+
+  @include breakpoint(medium) {
+    padding: $space-12 0;
+  }
+}
+
+.space-12 {
+  padding: $space-12 0;
+
+  @include breakpoint(medium) {
+    padding: $space-16 0;
+  }
+}
+
+.space-16 {
+  padding: $space-16 0;
+
+  @include breakpoint(medium) {
+    padding: $space-24 0;
+  }
+}
+
+.space-24 {
+  padding: $space-24 0;
+
+  @include breakpoint(medium) {
+    padding: $space-32 0;
+  }
+}
+
+.space-32 {
+  padding: $space-32 0;
+
+  @include breakpoint(medium) {
+    padding: $space-48 0;
+  }
+}
+
+.space-48 {
+  padding: $space-48 0;
+
+  @include breakpoint(medium) {
+    padding: $space-64 0;
+  }
+}
+
+.space-64 {
+  padding: $space-64 0;
+
+  @include breakpoint(medium) {
+    padding: $space-96 0;
+  }
+}
+
+.space-96 {
+  padding: $space-96 0;
+
+  @include breakpoint(medium) {
+    padding: $space-128 0;
+  }
+}
+
+.space-128 {
+  padding: $space-128 0;
+
+  @include breakpoint(medium) {
+    padding: $space-192 0;
+  }
+}
+
+.space-192 {
+  padding: $space-192 0;
+
+  @include breakpoint(medium) {
+    padding: $space-256 0;
+  }
+}
+
+.top {
+  padding-bottom: 0;
+}
+
+.bottom {
+  padding-top: 0;
+}
+
+// automated element space flow for content
+.space-content {
+  > * + * {
+    margin-top: $space-24;
+    margin-bottom: 0;
+  }
+
+  // headings flow
+  > h2 {
+    margin-top: $space-48;
+
+    @include breakpoint(large) {
+      margin-top: $space-64;
+    }
+  }
+
+  > h3 {
+    margin-top: $space-32;
+
+    @include breakpoint(large) {
+      margin-top: $space-48;
+    }
+  }
+
+  > h4 {
+    margin-top: $space-24;
+
+    @include breakpoint(large) {
+      margin-top: $space-32;
+    }
+  }
+
+  > h5 {
+    margin-top: $space-16;
+
+    @include breakpoint(large) {
+      margin-top: $space-24;
+    }
+  }
+
+  > h6 {
+    margin-top: $space-16;
+
+    @include breakpoint(large) {
+      margin-top: $space-24;
+    }
+  }
+
+  // exclude spacing on first child of content flows
+  > *:first-child {
+    margin-top: 0;
+  }
+}
diff --git a/public/styles/globals.scss b/public/styles/globals.scss
new file mode 100644
index 0000000..bfd8a0a
--- /dev/null
+++ b/public/styles/globals.scss
@@ -0,0 +1,20 @@
+/*
+ | -------------------------------------------------------------
+ |  --> global styles
+ | -------------------------------------------------------------
+ |
+ | 	This file contains all the global styling components.
+ |
+*/
+
+// global styles
+@use "base/reset";
+@use "base/root";
+@use "base/scheme";
+@use "base/font";
+@use "base/list";
+
+// utilities
+@use "base/auto-grid";
+@use "base/grid";
+@use "base/utility";
diff --git a/src/components/DarkMode.astro b/src/components/DarkMode.astro
new file mode 100644
index 0000000..1f4cfc1
--- /dev/null
+++ b/src/components/DarkMode.astro
@@ -0,0 +1,47 @@
+<button class="darkmode-toggle" aria-pressed="false">Enable Dark Mode</button>
+
+<script>
+  // variables
+  let darkMode = localStorage.getItem('darkMode')
+  const systemPrefs = window.matchMedia('(prefers-color-scheme: dark)').matches
+  const darkModeToggle = document.querySelector('.darkmode-toggle')
+
+  // functions
+  const enableDarkMode = _ => {
+    document.body.classList.add('darkmode')
+    darkModeToggle.textContent = 'Disable Dark Mode'
+    darkModeToggle.setAttribute('aria-pressed', 'true')
+    localStorage.setItem('darkMode', 'enabled')
+  }
+
+  const disableDarkMode = _ => {
+    document.body.classList.remove('darkmode')
+    darkModeToggle.textContent = 'Enable Dark Mode'
+    darkModeToggle.setAttribute('aria-pressed', 'false')
+    localStorage.setItem('darkMode', null)
+  }
+
+  // excecution
+  if (darkMode === 'enabled' || systemPrefs) enableDarkMode()
+
+  darkModeToggle.addEventListener('click', _ => {
+    darkMode = localStorage.getItem('darkMode')
+
+    darkMode !== 'enabled'
+      ? enableDarkMode()
+      : disableDarkMode()
+  })
+</script>
+
+<style lang="scss">
+  .darkmode-toggle {
+    border: 2px solid var(--secondary-clr-500);
+    border-radius: var(--radius-small);
+    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
+
+    &:hover {
+      color: var(--neutral-clr-0);
+      background-color: var(--secondary-clr-500);
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
new file mode 100644
index 0000000..7ce2d5f
--- /dev/null
+++ b/src/components/Footer.astro
@@ -0,0 +1,7 @@
+<footer role="contentinfo">
+  <section class="space-16 color-neutral">
+    <div class="container">
+      <p>&copy; Footer Copyright</p>
+    </div>
+  </section>
+</footer>
\ No newline at end of file
diff --git a/src/components/Header.astro b/src/components/Header.astro
new file mode 100644
index 0000000..502c0eb
--- /dev/null
+++ b/src/components/Header.astro
@@ -0,0 +1,32 @@
+---
+import Navigation from '../components/Navigation.astro'
+import SkipLinks from '../components/SkipLinks.astro'
+---
+<header role="banner">
+  <SkipLinks client:load />
+  <section class="space-16 color-neutral">
+    <div class="container">
+      <img src="/assets/logo.svg" alt="Your Logo">
+      <Navigation client:load />
+    </div>
+  </section>
+</header>
+
+<style lang="scss">
+  .container  {
+    gap: 1rem;
+    
+    img {
+      max-height: 40px;
+      align-self: flex-start;
+    }
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    @media (min-width: 35rem) {
+      flex-direction: row;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
new file mode 100644
index 0000000..6e21f5a
--- /dev/null
+++ b/src/components/Navigation.astro
@@ -0,0 +1,65 @@
+<nav id="main-navigation">
+  <ul>
+    <li><a href="#" aria-current="page">Home</a></li>
+    <li><a href="#">About</a></li>
+    <li><a href="#">Contact</a></li>
+  </ul>
+</nav>
+
+<script>
+  // variables
+  const mainNav = document.querySelector('#main-navigation')
+  const mainMenu = mainNav.querySelector('ul')
+
+  // execution
+  mainMenu && mainMenu.addEventListener('keydown', event => {
+    const currentMenuItem = event.target.closest('li')
+    const menuItems = [...mainMenu.querySelectorAll('li')]
+    const index = menuItems.findIndex(item => item === currentMenuItem)
+
+    const key = event.key
+    let targetItem
+
+    // move right on arrow right
+    if (key === 'ArrowRight') {
+      // if it's the last item, go the first, else go to next
+      if (menuItems.indexOf(currentMenuItem) === menuItems.length - 1) {
+        targetItem = menuItems[0]
+      } else {
+        targetItem = menuItems[index + 1]
+      }
+    }
+
+    // move left on arrow left
+    if (key === 'ArrowLeft') {
+      // if it's the first item, go the last, else go to next
+      if (menuItems.indexOf(currentMenuItem) === 0) {
+        targetItem = menuItems[menuItems.length - 1]
+      } else {
+        targetItem = menuItems[index - 1]
+      }
+    }
+
+    // escape to go back to first item
+    if (key === 'Escape') {
+      targetItem = menuItems[0]
+    }
+
+    // set focus on target item
+    if (targetItem) {
+      targetItem.querySelector('a, button, input').focus()
+    }
+  })
+</script>
+
+<style lang="scss">
+  nav > ul {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+
+    @media (min-width: 35rem) {
+      flex-direction: row;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/SkipLinks.astro b/src/components/SkipLinks.astro
new file mode 100644
index 0000000..cd2f781
--- /dev/null
+++ b/src/components/SkipLinks.astro
@@ -0,0 +1,64 @@
+<section>
+	<div class="container">
+    <nav class="skip-links" role="navigation" aria-label="Skiplinks">
+      <ul>
+        <li><a href="#main-navigation" data-skip-link>Skip to main menu</a></li>
+        <li><a href="#main-content" data-skip-link>Skip to main content</a></li>
+      </ul>
+    </nav>
+	</div>
+</section>
+
+<script>
+  // variables
+  const skipLinks = [...document.querySelectorAll('[data-skip-link]')]
+
+  // execution
+  if (skipLinks.length > 0) {
+    skipLinks.forEach(link => {
+      link.addEventListener('keydown', event => {
+        // if keydown event is not on the skip link itself, return and exit
+        if (!event.target.closest('[data-skip-link]')) return
+        const key = event.key
+        // if keydown event is nog an enter, return and exit
+        if (key !== 'Enter') return
+        // prevent default anchor behaviour
+        event.preventDefault()
+        const target = event.target.getAttribute('href')
+
+        // set focus to first menu item for skip link to main navigation
+        if (target === '#main-navigation') {
+          const navigation = document.querySelector('#main-navigation')
+          navigation.querySelector('a').focus()
+        }
+
+        // set focus to first h1 for skip link to main content
+        if (target === '#main-content') {
+          document.querySelector('h1').focus()
+        }
+      })
+    })
+  }
+</script>
+
+<style lang="scss">
+  .skip-links {
+    a {
+      color: var(--action-color);
+      background-color: var(--background);
+      border-bottom-right-radius: 6px;
+      padding: 1rem 3.25rem;
+      position: absolute;
+      display: block;
+      z-index: 10;
+      top: -100vh;
+      left: 0;
+
+      &:hover,
+      &:focus {
+        top: 0;
+        outline-offset: 2px;
+      }
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/Tour.astro b/src/components/Tour.astro
deleted file mode 100644
index 71dbb74..0000000
--- a/src/components/Tour.astro
+++ /dev/null
@@ -1,85 +0,0 @@
----
-import { Markdown } from 'astro/components';
----
-<article>
-    <div class="banner">
-        <p><strong>🧑‍🚀 Seasoned astronaut?</strong> Delete this file. Have fun!</p>
-    </div>
-
-    <section>
-        <Markdown>
-            ## 🚀 Project Structure
-
-            Inside of your Astro project, you'll see the following folders and files:
-
-            ```
-            /
-            ├── public/
-            │   ├── robots.txt
-            │   └── favicon.ico
-            ├── src/
-            │   ├── components/
-            │   │   └── Tour.astro
-            │   └── pages/
-            │       └── index.astro
-            └── package.json
-            ```
-
-            Astro looks for `.astro` or `.md` files in the `src/pages/` directory.
-            Each page is exposed as a route based on its file name.
-
-            There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
-
-            Any static assets, like images, can be placed in the `public/` directory.
-        </Markdown>
-    </section>
-
-     <section>
-        <h2>👀 Want to learn more?</h2>
-        <p>Feel free to check <a href="https://github.com/snowpackjs/astro">our documentation</a> or jump into our <a href="https://astro.build/chat">Discord server</a>.</p>
-    </section>
-    
-</article>
-
-<style>
-    article {
-        padding-top: 2em;
-        line-height: 1.5;
-    }
-    section {
-        margin-top: 2em;
-        display: flex;
-        flex-direction: column;
-        gap: 1em;
-        max-width: 70ch;
-    }
-
-    .banner {
-        text-align: center;
-        font-size: 1.2rem;
-        background: var(--color-light);
-        padding: 1em 1.5em;
-        padding-left: 0.75em;
-        border-radius: 4px;
-    }
-
-    pre,
-    code {
-        font-family: var(--font-mono);
-        background: var(--color-light);
-        border-radius: 4px;
-    }
-
-    pre {
-        padding: 1em 1.5em;
-    }
-
-    .tree {
-        line-height: 1.2;
-    }
-
-    code:not(.tree) {
-        padding: 0.125em;
-        margin: 0 -0.125em;
-    }
-</style>
diff --git a/src/layouts/DefaultLayout.astro b/src/layouts/DefaultLayout.astro
new file mode 100644
index 0000000..da6de5f
--- /dev/null
+++ b/src/layouts/DefaultLayout.astro
@@ -0,0 +1,68 @@
+---
+import Header from '../components/Header.astro'
+import Footer from '../components/Footer.astro'
+
+const {title} = Astro.props
+let subtitle = 'Accessible Astro Starter'
+---
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+
+    <!-- favicon -->
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+
+    <!-- google fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600;800&display=swap" rel="stylesheet">
+
+    <!-- global css -->
+    <link rel="stylesheet" type="text/css" href="/styles/globals.css">
+
+    <!-- open graph -->
+    <meta property="og:title" content="Accessible Astro Starter">
+    <meta property="og:description" content="A starter project with accessible features using Astro static site builder. Contains accessible landmarks, skip links, a dark mode color scheme, better focus outline and keyboard menu navigation.">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://accessible-astro.markteekman.nl/">
+    <meta property="og:image" content="/assets/social-preview-image.png">
+
+    <!-- page title -->
+    <title>{title} - {subtitle}</title>
+  </head>
+  <body>
+
+    <!-- header -->
+    <Header />
+
+    <!-- main -->
+    <main id="main-content" role="main">
+
+      <slot />
+
+    </main>
+
+    <!-- footer -->
+    <Footer />
+
+  </body>
+</html>
+
+<style lang="scss">
+  // sticky footer on low content pages
+  html {
+    height: 100%;
+  }
+
+  body {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background-color: var(--background);
+
+    main { flex: 1 0 auto; }
+    footer { flex-shrink: 0; }
+  }
+</style>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 0a44b41..be39804 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,56 +1,45 @@
 ---
-// Component Imports
-import Tour from '../components/Tour.astro';
-// You can import components from any supported Framework here!
-
-
-// Component Script:
-// You can write any JavaScript/TypeScript that you'd like here.
-// It will run during the build, but never in the browser.
-// All variables are available to use in the HTML template below.
-let title = 'My Astro Site';
-
-// Full Astro Component Syntax:
-// https://docs.astro.build/core-concepts/astro-components/
+import DefaultLayout from '../layouts/DefaultLayout.astro'
+import DarkMode from '../components/DarkMode.astro'
 ---
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>{title}</title>
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
-    <link rel="stylesheet" href="/style/global.css">
-    <link rel="stylesheet" href="/style/home.css">
-
-    <style>
-        header {
-            display: flex;
-            flex-direction: column;
-            gap: 1em;
-            max-width: min(100%, 68ch);
-        }
-    </style>
-</head>
-<body>
-    <main>
-        <header>
-            <div>
-                <img width="60" height="80" src="/assets/logo.svg" alt="Astro logo">
-                <h1>Welcome to <a href="https://astro.build/">Astro</a></h1>
-            </div>
-        </header>
-
-        <Tour />
-
-        <!--
-           - You can also use imported framework components directly in your markup!
-           -
-           - Note: by default, these components are NOT interactive on the client.
-           - The `:visible` directive tells Astro to make it interactive.
-           -
-           - See https://docs.astro.build/core-concepts/component-hydration/ 
-           -->
-
-    </main>
-</body>
-</html>
+<DefaultLayout title="Home">
+  <section class="space-32">
+    <div class="container">
+      <h1 tabindex="-1">Hello world!</h1><br>
+      <DarkMode client:load />
+    </div>
+  </section>
+  <section class="space-32 color-primary">
+    <div class="container">
+      <h2 class="space-16 bottom">Grid example</h2>
+    </div>
+    <div class="container" data-auto-grid="3">
+      <p><strong>Column 1 | Cell 1</strong> - Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem accusantium placeat eius officiis veniam totam. Earum eos et voluptate dolorem. <strong><a href="#">Tab to me!</a></strong></p>
+      <p><strong>Column 2 | Cell 2</strong> - Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem accusantium placeat eius officiis veniam totam. Earum eos et voluptate dolorem.</p>
+      <p><strong>Column 3 | Cell 3</strong> - Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem accusantium placeat eius officiis veniam totam. Earum eos et voluptate dolorem.</p>
+    </div>
+  </section>
+  <section class="space-32">
+    <div class="container">
+      <div class="grid gutters">
+        <div class="cell">
+          <h2>Flexbox example</h2>
+        </div>
+        <div class="cell space-content small-12 medium-3">
+          <h3>Sidebar</h3>
+          <ul>
+            <li>Lorem ipsum dolor sit amet.</li>
+            <li>Lorem ipsum dolor sit amet.</li>
+            <li>Lorem ipsum dolor sit amet.</li>
+            <li>Lorem ipsum dolor sit amet.</li>
+          </ul>
+        </div>
+        <div class="cell space-content small-12 medium-8 offset-medium-1">
+          <h3>Main</h3>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi mollitia alias sunt accusamus reiciendis fuga delectus, repellendus molestiae dolore illo iusto eligendi eaque qui hic facilis assumenda! Velit, minus, nobis. <strong><a href="#">Tab to me!</a></strong></p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi mollitia alias sunt accusamus reiciendis fuga delectus, repellendus molestiae dolore illo iusto eligendi eaque qui hic facilis assumenda! Velit, minus, nobis.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+</DefaultLayout>