diff --git a/package-lock.json b/package-lock.json
index b045432..f4230fc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "svelte-check": "^2.2.6",
         "svelte-preprocess": "^4.9.4",
         "tailwindcss": "^3.0.18",
+        "tailwindcss-text-fill-stroke": "^1.1.2",
         "tslib": "^2.3.1",
         "typescript": "^4.4.3"
       }
@@ -159,6 +160,252 @@
         "node": ">= 4"
       }
     },
+    "node_modules/@fullhuman/postcss-purgecss": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-2.3.0.tgz",
+      "integrity": "sha512-qnKm5dIOyPGJ70kPZ5jiz0I9foVOic0j+cOzNDoo8KoCf6HjicIZ99UfO2OmE7vCYSKAAepEwJtNzpiiZAh9xw==",
+      "dev": true,
+      "dependencies": {
+        "postcss": "7.0.32",
+        "purgecss": "^2.3.0"
+      }
+    },
+    "node_modules/@fullhuman/postcss-purgecss/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@fullhuman/postcss-purgecss/node_modules/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,
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@fullhuman/postcss-purgecss/node_modules/chalk/node_modules/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,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@fullhuman/postcss-purgecss/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/@fullhuman/postcss-purgecss/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+      "dev": true
+    },
+    "node_modules/@fullhuman/postcss-purgecss/node_modules/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,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/@fullhuman/postcss-purgecss/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@fullhuman/postcss-purgecss/node_modules/postcss": {
+      "version": "7.0.32",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+      "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "tidelift",
+        "url": "https://tidelift.com/funding/github/npm/postcss"
+      }
+    },
+    "node_modules/@fullhuman/postcss-purgecss/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@fullhuman/postcss-purgecss/node_modules/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,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@hacknug/tailwindcss-plugin-utils": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@hacknug/tailwindcss-plugin-utils/-/tailwindcss-plugin-utils-0.8.0.tgz",
+      "integrity": "sha512-g7DTjLhZe/oWGtlo1w4LzsElJJp+Q3VenFmDJrx91exyBOgdF74WmMNzhiEvG+qckyriy0jy/kIDj8jlN9pxVg==",
+      "dev": true,
+      "dependencies": {
+        "flat": "^4.1.0",
+        "lodash": "^4.17.15",
+        "postcss": "^7.0.18",
+        "tailwindcss": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
+    "node_modules/@hacknug/tailwindcss-plugin-utils/node_modules/autoprefixer": {
+      "version": "9.8.8",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.8.tgz",
+      "integrity": "sha512-eM9d/swFopRt5gdJ7jrpCwgvEMIayITpojhkkSMRsFHYuH5bkSQ4p/9qTEHtmNudUZh22Tehu7I6CxAW0IXTKA==",
+      "dev": true,
+      "dependencies": {
+        "browserslist": "^4.12.0",
+        "caniuse-lite": "^1.0.30001109",
+        "normalize-range": "^0.1.2",
+        "num2fraction": "^1.2.2",
+        "picocolors": "^0.2.1",
+        "postcss": "^7.0.32",
+        "postcss-value-parser": "^4.1.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "funding": {
+        "type": "tidelift",
+        "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+      }
+    },
+    "node_modules/@hacknug/tailwindcss-plugin-utils/node_modules/picocolors": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+      "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+      "dev": true
+    },
+    "node_modules/@hacknug/tailwindcss-plugin-utils/node_modules/postcss": {
+      "version": "7.0.39",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+      "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+      "dev": true,
+      "dependencies": {
+        "picocolors": "^0.2.1",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/@hacknug/tailwindcss-plugin-utils/node_modules/postcss-js": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-2.0.3.tgz",
+      "integrity": "sha512-zS59pAk3deu6dVHyrGqmC3oDXBdNdajk4k1RyxeVXCrcEDBUBHoIhE4QTsmhxgzXxsaqFDAkUZfmMa5f/N/79w==",
+      "dev": true,
+      "dependencies": {
+        "camelcase-css": "^2.0.1",
+        "postcss": "^7.0.18"
+      }
+    },
+    "node_modules/@hacknug/tailwindcss-plugin-utils/node_modules/postcss-nested": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-4.2.3.tgz",
+      "integrity": "sha512-rOv0W1HquRCamWy2kFl3QazJMMe1ku6rCFoAAH+9AcxdbpDeBr6k968MLWuLjvjMcGEip01ak09hKOEgpK9hvw==",
+      "dev": true,
+      "dependencies": {
+        "postcss": "^7.0.32",
+        "postcss-selector-parser": "^6.0.2"
+      }
+    },
+    "node_modules/@hacknug/tailwindcss-plugin-utils/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@hacknug/tailwindcss-plugin-utils/node_modules/tailwindcss": {
+      "version": "1.9.6",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-1.9.6.tgz",
+      "integrity": "sha512-nY8WYM/RLPqGsPEGEV2z63riyQPcHYZUJpAwdyBzVpxQHOHqHE+F/fvbCeXhdF1+TA5l72vSkZrtYCB9hRcwkQ==",
+      "dev": true,
+      "dependencies": {
+        "@fullhuman/postcss-purgecss": "^2.1.2",
+        "autoprefixer": "^9.4.5",
+        "browserslist": "^4.12.0",
+        "bytes": "^3.0.0",
+        "chalk": "^3.0.0 || ^4.0.0",
+        "color": "^3.1.2",
+        "detective": "^5.2.0",
+        "fs-extra": "^8.0.0",
+        "html-tags": "^3.1.0",
+        "lodash": "^4.17.20",
+        "node-emoji": "^1.8.1",
+        "normalize.css": "^8.0.1",
+        "object-hash": "^2.0.3",
+        "postcss": "^7.0.11",
+        "postcss-functions": "^3.0.0",
+        "postcss-js": "^2.0.0",
+        "postcss-nested": "^4.1.1",
+        "postcss-selector-parser": "^6.0.0",
+        "postcss-value-parser": "^4.1.0",
+        "pretty-hrtime": "^1.0.3",
+        "reduce-css-calc": "^2.1.6",
+        "resolve": "^1.14.2"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=8.9.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz",
@@ -768,6 +1015,15 @@
         "node": "*"
       }
     },
+    "node_modules/bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -839,6 +1095,16 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/color": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
+      "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^1.9.3",
+        "color-string": "^1.6.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -857,6 +1123,40 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
+    "node_modules/color/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/color/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+      "dev": true
+    },
+    "node_modules/commander": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
+      "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -893,6 +1193,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-unit-converter": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
+      "integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==",
+      "dev": true
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -1648,6 +1954,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/flat": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/flat/-/flat-4.1.1.tgz",
+      "integrity": "sha512-FmTtBsHskrU6FJ2VxCnsDb84wu9zhmO3cUX2kGFb5tuwhfXxGciiT0oRY+cck35QmG+NmGh5eLz6lLCpWTqwpA==",
+      "dev": true,
+      "dependencies": {
+        "is-buffer": "~2.0.3"
+      },
+      "bin": {
+        "flat": "cli.js"
+      }
+    },
     "node_modules/flat-cache": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
@@ -1680,6 +1998,20 @@
         "url": "https://www.patreon.com/infusion"
       }
     },
+    "node_modules/fs-extra": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+      "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=6 <7 || >=8"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -1818,6 +2150,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/html-tags": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.2.0.tgz",
+      "integrity": "sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
@@ -1886,6 +2230,29 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-buffer": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
+      "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/is-core-module": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.1.tgz",
@@ -1980,6 +2347,15 @@
       "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=",
       "dev": true
     },
+    "node_modules/jsonfile": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
+      "dev": true,
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
     "node_modules/kleur": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.4.tgz",
@@ -2017,6 +2393,12 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "dev": true
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -2144,6 +2526,15 @@
       "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
       "dev": true
     },
+    "node_modules/node-emoji": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.11.0.tgz",
+      "integrity": "sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==",
+      "dev": true,
+      "dependencies": {
+        "lodash": "^4.17.21"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz",
@@ -2168,6 +2559,27 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/normalize.css": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
+      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==",
+      "dev": true
+    },
+    "node_modules/num2fraction": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
+      "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
+      "dev": true
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/object-hash": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz",
@@ -2302,17 +2714,129 @@
         "url": "https://opencollective.com/postcss/"
       }
     },
-    "node_modules/postcss-js": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
-      "integrity": "sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==",
+    "node_modules/postcss-functions": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-functions/-/postcss-functions-3.0.0.tgz",
+      "integrity": "sha1-DpTQFERwCkgd4g3k1V+yZAVkJQ4=",
       "dev": true,
       "dependencies": {
-        "camelcase-css": "^2.0.1"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >= 16"
-      },
+        "glob": "^7.1.2",
+        "object-assign": "^4.1.1",
+        "postcss": "^6.0.9",
+        "postcss-value-parser": "^3.3.0"
+      }
+    },
+    "node_modules/postcss-functions/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-functions/node_modules/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,
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-functions/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/postcss-functions/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+      "dev": true
+    },
+    "node_modules/postcss-functions/node_modules/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,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/postcss-functions/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-functions/node_modules/postcss": {
+      "version": "6.0.23",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+      "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.1",
+        "source-map": "^0.6.1",
+        "supports-color": "^5.4.0"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/postcss-functions/node_modules/postcss-value-parser": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+      "dev": true
+    },
+    "node_modules/postcss-functions/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/postcss-functions/node_modules/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,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
+      "integrity": "sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==",
+      "dev": true,
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/postcss/"
@@ -2415,6 +2939,15 @@
         "svelte": "^3.2.0"
       }
     },
+    "node_modules/pretty-hrtime": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
+      "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/progress": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
@@ -2433,6 +2966,131 @@
         "node": ">=6"
       }
     },
+    "node_modules/purgecss": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-2.3.0.tgz",
+      "integrity": "sha512-BE5CROfVGsx2XIhxGuZAT7rTH9lLeQx/6M0P7DTXQH4IUc3BBzs9JUzt4yzGf3JrH9enkeq6YJBe9CTtkm1WmQ==",
+      "dev": true,
+      "dependencies": {
+        "commander": "^5.0.0",
+        "glob": "^7.0.0",
+        "postcss": "7.0.32",
+        "postcss-selector-parser": "^6.0.2"
+      },
+      "bin": {
+        "purgecss": "bin/purgecss"
+      }
+    },
+    "node_modules/purgecss/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/purgecss/node_modules/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,
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/purgecss/node_modules/chalk/node_modules/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,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/purgecss/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/purgecss/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+      "dev": true
+    },
+    "node_modules/purgecss/node_modules/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,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/purgecss/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/purgecss/node_modules/postcss": {
+      "version": "7.0.32",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+      "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "tidelift",
+        "url": "https://tidelift.com/funding/github/npm/postcss"
+      }
+    },
+    "node_modules/purgecss/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/purgecss/node_modules/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,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -2477,6 +3135,22 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/reduce-css-calc": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz",
+      "integrity": "sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==",
+      "dev": true,
+      "dependencies": {
+        "css-unit-converter": "^1.1.1",
+        "postcss-value-parser": "^3.3.0"
+      }
+    },
+    "node_modules/reduce-css-calc/node_modules/postcss-value-parser": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+      "dev": true
+    },
     "node_modules/regexpp": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
@@ -2659,6 +3333,21 @@
         "node": ">=8"
       }
     },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
+      "dev": true,
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
+    "node_modules/simple-swizzle/node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+      "dev": true
+    },
     "node_modules/slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -2988,6 +3677,15 @@
         "postcss": "^8.0.9"
       }
     },
+    "node_modules/tailwindcss-text-fill-stroke": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/tailwindcss-text-fill-stroke/-/tailwindcss-text-fill-stroke-1.1.2.tgz",
+      "integrity": "sha512-Tib9Rzy7edm+vnuTdGtuSrUUX+8Ldk60IWu6z/8EG2Lx64TUQJdj5uLkCEDbV0XjK9Ew89PondRtn+QKuGysbA==",
+      "dev": true,
+      "dependencies": {
+        "@hacknug/tailwindcss-plugin-utils": "^0.8.0"
+      }
+    },
     "node_modules/tailwindcss/node_modules/glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -3092,6 +3790,15 @@
         "node": ">=4.2.0"
       }
     },
+    "node_modules/universalify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
     "node_modules/uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -3315,6 +4022,203 @@
         }
       }
     },
+    "@fullhuman/postcss-purgecss": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-2.3.0.tgz",
+      "integrity": "sha512-qnKm5dIOyPGJ70kPZ5jiz0I9foVOic0j+cOzNDoo8KoCf6HjicIZ99UfO2OmE7vCYSKAAepEwJtNzpiiZAh9xw==",
+      "dev": true,
+      "requires": {
+        "postcss": "7.0.32",
+        "purgecss": "^2.3.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "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"
+              }
+            }
+          }
+        },
+        "color-convert": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+          "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+          "dev": true,
+          "requires": {
+            "color-name": "1.1.3"
+          }
+        },
+        "color-name": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+          "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
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "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"
+          }
+        }
+      }
+    },
+    "@hacknug/tailwindcss-plugin-utils": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@hacknug/tailwindcss-plugin-utils/-/tailwindcss-plugin-utils-0.8.0.tgz",
+      "integrity": "sha512-g7DTjLhZe/oWGtlo1w4LzsElJJp+Q3VenFmDJrx91exyBOgdF74WmMNzhiEvG+qckyriy0jy/kIDj8jlN9pxVg==",
+      "dev": true,
+      "requires": {
+        "flat": "^4.1.0",
+        "lodash": "^4.17.15",
+        "postcss": "^7.0.18",
+        "tailwindcss": "^1.1.2"
+      },
+      "dependencies": {
+        "autoprefixer": {
+          "version": "9.8.8",
+          "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.8.tgz",
+          "integrity": "sha512-eM9d/swFopRt5gdJ7jrpCwgvEMIayITpojhkkSMRsFHYuH5bkSQ4p/9qTEHtmNudUZh22Tehu7I6CxAW0IXTKA==",
+          "dev": true,
+          "requires": {
+            "browserslist": "^4.12.0",
+            "caniuse-lite": "^1.0.30001109",
+            "normalize-range": "^0.1.2",
+            "num2fraction": "^1.2.2",
+            "picocolors": "^0.2.1",
+            "postcss": "^7.0.32",
+            "postcss-value-parser": "^4.1.0"
+          }
+        },
+        "picocolors": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
+          "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.39",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz",
+          "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==",
+          "dev": true,
+          "requires": {
+            "picocolors": "^0.2.1",
+            "source-map": "^0.6.1"
+          }
+        },
+        "postcss-js": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-2.0.3.tgz",
+          "integrity": "sha512-zS59pAk3deu6dVHyrGqmC3oDXBdNdajk4k1RyxeVXCrcEDBUBHoIhE4QTsmhxgzXxsaqFDAkUZfmMa5f/N/79w==",
+          "dev": true,
+          "requires": {
+            "camelcase-css": "^2.0.1",
+            "postcss": "^7.0.18"
+          }
+        },
+        "postcss-nested": {
+          "version": "4.2.3",
+          "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-4.2.3.tgz",
+          "integrity": "sha512-rOv0W1HquRCamWy2kFl3QazJMMe1ku6rCFoAAH+9AcxdbpDeBr6k968MLWuLjvjMcGEip01ak09hKOEgpK9hvw==",
+          "dev": true,
+          "requires": {
+            "postcss": "^7.0.32",
+            "postcss-selector-parser": "^6.0.2"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "tailwindcss": {
+          "version": "1.9.6",
+          "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-1.9.6.tgz",
+          "integrity": "sha512-nY8WYM/RLPqGsPEGEV2z63riyQPcHYZUJpAwdyBzVpxQHOHqHE+F/fvbCeXhdF1+TA5l72vSkZrtYCB9hRcwkQ==",
+          "dev": true,
+          "requires": {
+            "@fullhuman/postcss-purgecss": "^2.1.2",
+            "autoprefixer": "^9.4.5",
+            "browserslist": "^4.12.0",
+            "bytes": "^3.0.0",
+            "chalk": "^3.0.0 || ^4.0.0",
+            "color": "^3.1.2",
+            "detective": "^5.2.0",
+            "fs-extra": "^8.0.0",
+            "html-tags": "^3.1.0",
+            "lodash": "^4.17.20",
+            "node-emoji": "^1.8.1",
+            "normalize.css": "^8.0.1",
+            "object-hash": "^2.0.3",
+            "postcss": "^7.0.11",
+            "postcss-functions": "^3.0.0",
+            "postcss-js": "^2.0.0",
+            "postcss-nested": "^4.1.1",
+            "postcss-selector-parser": "^6.0.0",
+            "postcss-value-parser": "^4.1.0",
+            "pretty-hrtime": "^1.0.3",
+            "reduce-css-calc": "^2.1.6",
+            "resolve": "^1.14.2"
+          }
+        }
+      }
+    },
     "@humanwhocodes/config-array": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz",
@@ -3730,6 +4634,12 @@
       "integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=",
       "dev": true
     },
+    "bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "dev": true
+    },
     "callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -3774,6 +4684,33 @@
         "readdirp": "~3.6.0"
       }
     },
+    "color": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
+      "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
+      "dev": true,
+      "requires": {
+        "color-convert": "^1.9.3",
+        "color-string": "^1.6.0"
+      },
+      "dependencies": {
+        "color-convert": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+          "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+          "dev": true,
+          "requires": {
+            "color-name": "1.1.3"
+          }
+        },
+        "color-name": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+          "dev": true
+        }
+      }
+    },
     "color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -3789,6 +4726,22 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
+    "color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dev": true,
+      "requires": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
+    "commander": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
+      "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
+      "dev": true
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -3819,6 +4772,12 @@
         "which": "^2.0.1"
       }
     },
+    "css-unit-converter": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
+      "integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==",
+      "dev": true
+    },
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -4346,6 +5305,15 @@
         "to-regex-range": "^5.0.1"
       }
     },
+    "flat": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/flat/-/flat-4.1.1.tgz",
+      "integrity": "sha512-FmTtBsHskrU6FJ2VxCnsDb84wu9zhmO3cUX2kGFb5tuwhfXxGciiT0oRY+cck35QmG+NmGh5eLz6lLCpWTqwpA==",
+      "dev": true,
+      "requires": {
+        "is-buffer": "~2.0.3"
+      }
+    },
     "flat-cache": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
@@ -4368,6 +5336,17 @@
       "integrity": "sha512-o2RiJQ6DZaR/5+Si0qJUIy637QMRudSi9kU/FFzx9EZazrIdnBgpU+3sEWCxAVhH2RtxW2Oz+T4p2o8uOPVcgA==",
       "dev": true
     },
+    "fs-extra": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+      "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
+      }
+    },
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -4472,6 +5451,12 @@
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
       "dev": true
     },
+    "html-tags": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.2.0.tgz",
+      "integrity": "sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==",
+      "dev": true
+    },
     "ignore": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
@@ -4525,6 +5510,12 @@
         "binary-extensions": "^2.0.0"
       }
     },
+    "is-buffer": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
+      "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==",
+      "dev": true
+    },
     "is-core-module": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.1.tgz",
@@ -4601,6 +5592,15 @@
       "integrity": "sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=",
       "dev": true
     },
+    "jsonfile": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
     "kleur": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.4.tgz",
@@ -4629,6 +5629,12 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "dev": true
     },
+    "lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true
+    },
     "lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -4729,6 +5735,15 @@
       "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
       "dev": true
     },
+    "node-emoji": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.11.0.tgz",
+      "integrity": "sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.17.21"
+      }
+    },
     "node-releases": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz",
@@ -4747,6 +5762,24 @@
       "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
       "dev": true
     },
+    "normalize.css": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
+      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==",
+      "dev": true
+    },
+    "num2fraction": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
+      "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
+      "dev": true
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "dev": true
+    },
     "object-hash": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz",
@@ -4844,6 +5877,99 @@
         "source-map-js": "^1.0.2"
       }
     },
+    "postcss-functions": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-functions/-/postcss-functions-3.0.0.tgz",
+      "integrity": "sha1-DpTQFERwCkgd4g3k1V+yZAVkJQ4=",
+      "dev": true,
+      "requires": {
+        "glob": "^7.1.2",
+        "object-assign": "^4.1.1",
+        "postcss": "^6.0.9",
+        "postcss-value-parser": "^3.3.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "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"
+          }
+        },
+        "color-convert": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+          "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+          "dev": true,
+          "requires": {
+            "color-name": "1.1.3"
+          }
+        },
+        "color-name": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+          "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
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "6.0.23",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
+          "integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.1",
+            "source-map": "^0.6.1",
+            "supports-color": "^5.4.0"
+          }
+        },
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "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"
+          }
+        }
+      }
+    },
     "postcss-js": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
@@ -4907,6 +6033,12 @@
       "dev": true,
       "requires": {}
     },
+    "pretty-hrtime": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
+      "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
+      "dev": true
+    },
     "progress": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
@@ -4919,6 +6051,104 @@
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
       "dev": true
     },
+    "purgecss": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-2.3.0.tgz",
+      "integrity": "sha512-BE5CROfVGsx2XIhxGuZAT7rTH9lLeQx/6M0P7DTXQH4IUc3BBzs9JUzt4yzGf3JrH9enkeq6YJBe9CTtkm1WmQ==",
+      "dev": true,
+      "requires": {
+        "commander": "^5.0.0",
+        "glob": "^7.0.0",
+        "postcss": "7.0.32",
+        "postcss-selector-parser": "^6.0.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "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"
+              }
+            }
+          }
+        },
+        "color-convert": {
+          "version": "1.9.3",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+          "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+          "dev": true,
+          "requires": {
+            "color-name": "1.1.3"
+          }
+        },
+        "color-name": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+          "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
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "7.0.32",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.32.tgz",
+          "integrity": "sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "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"
+          }
+        }
+      }
+    },
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -4940,6 +6170,24 @@
         "picomatch": "^2.2.1"
       }
     },
+    "reduce-css-calc": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz",
+      "integrity": "sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==",
+      "dev": true,
+      "requires": {
+        "css-unit-converter": "^1.1.1",
+        "postcss-value-parser": "^3.3.0"
+      },
+      "dependencies": {
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
+          "dev": true
+        }
+      }
+    },
     "regexpp": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
@@ -5058,6 +6306,23 @@
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
       "dev": true
     },
+    "simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
+      "dev": true,
+      "requires": {
+        "is-arrayish": "^0.3.1"
+      },
+      "dependencies": {
+        "is-arrayish": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+          "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+          "dev": true
+        }
+      }
+    },
     "slash": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
@@ -5277,6 +6542,15 @@
         }
       }
     },
+    "tailwindcss-text-fill-stroke": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/tailwindcss-text-fill-stroke/-/tailwindcss-text-fill-stroke-1.1.2.tgz",
+      "integrity": "sha512-Tib9Rzy7edm+vnuTdGtuSrUUX+8Ldk60IWu6z/8EG2Lx64TUQJdj5uLkCEDbV0XjK9Ew89PondRtn+QKuGysbA==",
+      "dev": true,
+      "requires": {
+        "@hacknug/tailwindcss-plugin-utils": "^0.8.0"
+      }
+    },
     "text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -5346,6 +6620,12 @@
       "integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==",
       "dev": true
     },
+    "universalify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "dev": true
+    },
     "uri-js": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
diff --git a/package.json b/package.json
index e9dc1bc..d1b963e 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "svelte-check": "^2.2.6",
     "svelte-preprocess": "^4.9.4",
     "tailwindcss": "^3.0.18",
+    "tailwindcss-text-fill-stroke": "^1.1.2",
     "tslib": "^2.3.1",
     "typescript": "^4.4.3"
   },
diff --git a/src/app.css b/src/app.css
index 582f7cf..d8cf931 100644
--- a/src/app.css
+++ b/src/app.css
@@ -23,6 +23,9 @@
 }
 
 hr {
-	border-color: rgb(255, 255, 255, 0.3);
-	border-width: 1px;
+	background-color: rgb(255, 255, 255, 0.3);
+	height: 3px;
+	border: unset;
+	width: 100%;
+	margin: 0.5em 0;
 }
diff --git a/src/lib/calculator/Calculator.svelte b/src/lib/calculator/Calculator.svelte
new file mode 100644
index 0000000..cd00b5a
--- /dev/null
+++ b/src/lib/calculator/Calculator.svelte
@@ -0,0 +1,228 @@
+<script lang="ts">
+    import Button from "$lib/header/Button.svelte";
+    import { onMount } from "svelte";
+    import words from "$lib/en-lang.json";
+import { base } from "$app/paths";
+
+    let lang = words["calculator"];
+    let types = lang["types"];
+
+    interface Commission {
+        type: string,
+        name: string,
+        price: number,
+        example: string,
+        questions?: any[],
+        answers?: any[],
+    }
+
+    let commissions: Commission[] = [];
+
+    let number: number;
+    $: number = commissions.length + 1;
+
+    function setup() {
+        const urlParams = new URLSearchParams(window.location.search);
+        urlParams.forEach((value, key) => {
+            if(key == "commissions") {
+                commissions = JSON.parse(value);
+            }
+        });
+        if(commissions.length == 0) base();
+    }
+
+    function update_example(commission: Commission) {
+        let lastQuestion = commission.questions[commission.questions.length - 1];
+        let lastAnswer = commission.answers[commission.answers.length - 1];
+        let example = "";
+        commission.example = "";
+        let type = types.filter(value => {
+            return value['name'] == commission.type;
+        });
+        type = type[0];
+
+        let count = 0;
+        commission.questions.forEach(value => {
+            if(type['examples_from'] == value['name']) {
+                lastQuestion = commission.questions[count];
+                lastAnswer = commission.answers[count];
+            }
+            count++;
+        })
+
+        lastQuestion.options.forEach(value => {
+            if(value['name'] == lastAnswer['option']) {
+                example = value['example'];
+            }
+        });
+
+        console.log(example);
+
+        type['examples'].forEach(value => {
+            if(value['name'] == example) {
+                commission.example = value['url'];
+            }
+        });
+    }
+
+    function base() {
+        let commission = {
+            "type": types[0]["name"],
+            "name": "Commission " + number,
+            "example": types[0]["example"],
+            "price": 10,
+        };
+        update_commission_type(commission);
+        update_example(commission);
+        update_price(commission);
+        commissions.push(commission);
+        commissions = commissions;
+    }
+
+    function save() {
+        const urlParams = new URLSearchParams(window.location.search);
+        urlParams.set("commissions", JSON.stringify(commissions));
+
+        let url = window.location.origin + window.location.pathname + "?" + urlParams.toString();
+
+        navigator.clipboard.writeText(url);
+        window.history.replaceState( {} , document.title, url);
+    }
+
+    function update_commission_type(commission: Commission) {
+        types.forEach(element => {
+            if(element["name"] == commission.type) {
+                commission.questions = element["questions"];
+            }
+        });
+        commission.answers = [];
+        commission.questions.forEach(value => {
+            commission.answers.push({'name': value.name, 'option': value.options[0]['name']});
+        });
+        update_price(commission);
+        update_example(commission);
+        console.log(commission.answers);
+    }
+
+    function update_price(commission: Commission) {
+        commission.price = 0;
+
+        for (let index = 0; index < commission.questions.length; index++) {
+            const question = commission.questions[index];
+            const answer = commission.answers[index];
+
+            question['options'].forEach(value => {
+                if(value['name'] == answer['option']) {
+                    commission.price += value['price'];
+                }
+            });
+        }
+    }
+
+    async function load() {
+        window.location.href = await navigator.clipboard.readText();
+    }
+
+    function createNew() {
+        base();
+        save();
+    }
+
+    function remove(name: string) {
+        commissions = commissions.filter(value => {
+            return value.name != name;
+        });
+        save();
+    }
+
+    onMount(() => {
+        setup();
+    });
+</script>
+
+<main class="container flex flex-col gap-5">
+    <section class="container bg-slate-800 rounded-lg shadow-lg p-3 flex flex-col w-full gap-5">
+        <nav class="flex flex-col lg:flex-row gap-3 justify-between justify-items-stretch items-center">
+            <Button href="/">⬅️ Back to home</Button>
+            <Button href="/commissions">🎨 Visit commissions page</Button>
+            <Button href="/commissions/tos">⚖️ Read Terms of Service</Button>
+        </nav>
+    </section>
+
+    <section class="container bg-slate-800 rounded-lg shadow-lg p-5 flex flex-col w-full gap-10">
+        <div class="flex justify-between -ml-2 -mr-2">
+            <div class="w-full flex gap-3">
+                <span><Button on:click={createNew}>➕ Add Commission</Button></span>
+            </div>
+            <div class="w-full flex justify-end gap-3">
+                <span><Button on:click={save}>💾 Save to Clipboard</Button></span>
+                <span><Button on:click={load}>✨ Load from Clipboard</Button></span>
+            </div>
+        </div>
+
+        <div class="flex items-center justify-between">
+            <div class="flex items-center gap-5">
+                <h3 class="text-6xl">🧮</h3>
+                <div class="flex flex-col gap-2">
+                    <div class="flex gap-3">
+                        <h4 class="text-xl font-bold">Total</h4>
+                        <p class="bg-green-500 py-1 text-sm px-5 rounded-lg">$20</p>
+                    </div>
+                    <p class="italic text-gray-200 text-sm">This figure is an estimate, the final price may differ.<br/>All commissions are strictly SFW only.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    {#each [...commissions].reverse() as commission}
+        <section class="flex gap-5">
+            <div class="w-3/5 bg-slate-800 rounded-lg shadow-lg p-5 flex flex-col gap-5">
+                <div class="flex justify-between">
+                    <h3 class="text-xl font-bold flex gap-5">{commission.name}<p class="bg-green-500 py-1 text-sm px-5 rounded-lg">${commission.price}</p></h3>
+                    <span>
+                        <Button on:click={() => {remove(commission.name)}}>🗑️</Button>
+                    </span>
+                </div>
+
+                <form class="flex flex-col gap-10" on:change={() => {update_example(commission)}}>
+                    <div class="flex flex-col gap-1">
+                        <label for={commission.type}>Type of commission</label>
+                        <select class="bg-slate-600 p-2 rounded-lg" bind:value={commission.type} on:change={() => {update_commission_type(commission)}}>
+                            {#each types as question}
+                                <option value={question.name}>{question.name}</option>
+                            {/each}
+                        </select>
+                    </div>
+
+                    {#each commission.questions as question, key}
+                        <div class="flex flex-col gap-1">
+                            <label for={commission.answers[key]['option']}>{question.name}</label>
+                            <select class="bg-slate-600 p-2 rounded-lg" bind:value={commission.answers[key]['option']} on:change={() => {update_price(commission)}}>
+                                {#each question.options as option}
+                                    <option value={option.name}>{option.name} | ${option.price}</option>
+                                {/each}
+                            </select>
+                        </div>
+                    {/each}
+                </form>
+            </div>
+
+            <div class="w-2/5">
+                {#if commission.example != ""}
+                    <div class="relative bg-black bg-opacity-50 rounded-xl shadow-xl">
+                        <p class="xl:block hidden absolute top-0 right-0 text-right -rotate-12 font-bold text-4xl -mb-40 -mr-40">
+                            🠔 Example!
+                        </p>
+                        <img src={commission.example} alt="example" class="rounded-xl shadow-xl w-full" />
+                    </div>
+                {:else}
+                    <div class="relative w-full aspect-square bg-black bg-opacity-50 rounded-xl shadow-xl">
+                        <p class="w-full h-full absolute inset-0 flex items-center justify-center text-center opacity-50 -rotate-45 font-bold text-6xl">
+                            NO EXAMPLE AVAILABLE
+                        </p>
+                    </div>
+                {/if}
+            </div>
+        </section>
+    {/each}
+</main>
\ No newline at end of file
diff --git a/src/lib/calculator/CalculatorHeader.svelte b/src/lib/calculator/CalculatorHeader.svelte
new file mode 100644
index 0000000..3a9d774
--- /dev/null
+++ b/src/lib/calculator/CalculatorHeader.svelte
@@ -0,0 +1,51 @@
+<script>
+    import { page } from "$app/stores";
+    console.log($page.url.pathname);
+</script>
+
+<header class="relative flex flex-col gap-10 max-w-[1400px] mx-auto my-20 dropanim">
+    <img src="/calculator/bannername.png" class="w-3/6 mb-10 lg:mb-0 mx-auto drop-shadow-2xl" alt="header siv kyne" />
+    <h1>
+        <img src="/calculator/banner.png" class="mb-10 lg:mb-0 mx-auto drop-shadow-2xl grow" alt="header siv kyne" />
+    </h1>
+</header>
+
+
+<style>
+    .dropanim {
+        animation: dropanim;
+        animation-duration: 0.4s;
+        animation-timing-function: ease-in-out;
+    }
+
+    @keyframes dropanim {
+        0% {
+            transform: translateY(-50vh);
+        }
+        50% {
+            transform: translateY(1vh);
+        }
+        100% {
+            transform: translateY(0);
+        }
+    }
+
+    .grow {
+        animation: grow;
+        animation-duration: 4s;
+        animation-timing-function: ease-in-out;
+        animation-iteration-count: infinite;
+    }
+
+    @keyframes grow {
+        0% {
+            transform: rotate3d(0, 20, 0, 20deg);
+        }
+        50% {
+            transform: rotate3d(0, 20, 0, -20deg);
+        }
+        100% {
+            transform: rotate3d(0, 20, 0, 20deg);
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/lib/calculator/stores.js b/src/lib/calculator/stores.js
new file mode 100644
index 0000000..83aefbb
--- /dev/null
+++ b/src/lib/calculator/stores.js
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const calculatorImages = writable([]);
diff --git a/src/lib/commissions/Accordion.svelte b/src/lib/commissions/Accordion.svelte
index 5218270..5ee4917 100644
--- a/src/lib/commissions/Accordion.svelte
+++ b/src/lib/commissions/Accordion.svelte
@@ -28,9 +28,9 @@
     }
 </script>
 
-<section class="container bg-gray-800 rounded-lg shadow-lg p-5 flex flex-col gap-5" id={id}>
+<section class="container bg-slate-800 rounded-lg shadow-lg p-5 flex flex-col gap-5" id={id}>
     <div class="flex justify-between items-center">
-        <h2 class="text-2xl font-bold">{title}</h2>
+        <h2 class="text-2xl font-bold">{@html title}</h2>
         <button type="none" id="{id}-trigger" on:click={openAccordion} class="text-2xl">➡️</button>
     </div>
 
diff --git a/src/lib/commissions/Item.svelte b/src/lib/commissions/Item.svelte
index 009ba71..fc14448 100644
--- a/src/lib/commissions/Item.svelte
+++ b/src/lib/commissions/Item.svelte
@@ -3,19 +3,37 @@
     export let price;
     export let picture = null;
     export let note = null;
+    export let link = null;
 </script>
 
-<div class="flex flex-col items-center gap-2">
-    <span class="w-full flex justify-between">
-        <h3 class="text-xl font-bold break-words">{name}</h3>
-        <span><span class="bg-green-500 py-1 text-sm px-5 rounded-lg">{price}</span></span>
-    </span>
-    {#if note}
-        <p class="text-sm text-gray-200 w-full">{@html note}</p>
-    {/if}
-    {#if picture}
-        <img src={picture} alt={name} class="w-full rounded-xl shadow" />
-    {:else}
-        <p class="p-2 italic text-gray-200 bg-gray-700 rounded-xl shadow w-full flex justify-center items-center text-center aspect-square">Example TBA</p>
-    {/if}
-</div>
\ No newline at end of file
+{#if link != null}
+    <a href={link} class="flex flex-col items-center gap-2">
+        <span class="w-full flex justify-between">
+            <h3 class="text-xl font-bold break-words">{name}</h3>
+            <span><span class="bg-green-500 py-1 text-sm px-5 rounded-lg">{price}</span></span>
+        </span>
+        {#if note}
+            <p class="text-sm text-gray-200 w-full">{@html note}</p>
+        {/if}
+        {#if picture}
+            <img src={picture} alt={name} class="w-full rounded-xl shadow" />
+        {:else}
+            <p class="p-2 italic text-gray-200 bg-gray-700 rounded-xl shadow w-full flex justify-center items-center text-center aspect-square">Example TBA</p>
+        {/if}
+    </a>
+{:else}
+    <div class="flex flex-col items-center gap-2">
+        <span class="w-full flex justify-between">
+            <h3 class="text-xl font-bold break-words">{name}</h3>
+            <span><span class="bg-green-500 py-1 text-sm px-5 rounded-lg">{price}</span></span>
+        </span>
+        {#if note}
+            <p class="text-sm text-gray-200 w-full">{@html note}</p>
+        {/if}
+        {#if picture}
+            <img src={picture} alt={name} class="w-full rounded-xl shadow" />
+        {:else}
+            <p class="p-2 italic text-gray-200 bg-gray-700 rounded-xl shadow w-full flex justify-center items-center text-center aspect-square">Example TBA</p>
+        {/if}
+    </div>
+{/if}
\ No newline at end of file
diff --git a/src/lib/elements/Form.svelte b/src/lib/elements/Form.svelte
index f51b27d..c7be9b2 100644
--- a/src/lib/elements/Form.svelte
+++ b/src/lib/elements/Form.svelte
@@ -44,7 +44,7 @@
 	}
 </script>
 
-<main class="flex flex-col gap-5 lg:w-2/3 mx-auto">
+<main class="flex flex-col gap-5">
     <form
         class="flex flex-col gap-5"
         action="https://api.staticforms.xyz/submit"
diff --git a/src/lib/en-lang.json b/src/lib/en-lang.json
index 71b246e..5c150b4 100644
--- a/src/lib/en-lang.json
+++ b/src/lib/en-lang.json
@@ -4,6 +4,157 @@
         "title": "Hello! I'm Siv Kyne!",
         "description": "I'm a young Asian artist who specializes in cartoony 2D animals.<br/>You can find more information below."
     },
+    "calculator": {
+        "title": "Commission Picker",
+        "description": "Use Siv Kyne's commission picker to estimate how much your commission would cost. Including multiple commissions, saving your presets, and more!",
+        "types": [
+            {
+                "name": "Icon",
+                "examples_from": "Detail level",
+                "examples": [
+                    {
+                        "name": "complexlineless",
+                        "url": "/commissions/alakai again.jpg"
+                    },
+                    {
+                        "name": "basic",
+                        "url": "/commissions/iconbasic.jpg"
+                    },
+                    {
+                        "name": "sketchy",
+                        "url": "/commissions/nick.jpg"
+                    },
+                    {
+                        "name": "ultralineart",
+                        "url": "/commissions/iconultralineart.jpg"
+                    },
+                    {
+                        "name": "basiclineless",
+                        "url": "/commissions/iconbasiclineless.jpg"
+                    },
+                    {
+                        "name": "cellshaded",
+                        "url": "/commissions/iconcellshaded.jpg"
+                    }
+                ],
+                "questions": [
+                    {
+                        "name": "Detail level",
+                        "options": [
+                            {
+                                "name": "Sketchy",
+                                "example": "sketchy",
+                                "price": 13
+                            },
+                            {
+                                "name": "Basic",
+                                "example": "basic",
+                                "price": 18
+                            },
+                            {
+                                "name": "Basic Lineless",
+                                "example": "basiclineless",
+                                "price": 18
+                            },
+                            {
+                                "name": "Cell Shaded",
+                                "example": "cellshaded",
+                                "price": 23
+                            },
+                            {
+                                "name": "Ultra Lineart",
+                                "example": "ultralineart",
+                                "price": 30
+                            },
+                            {
+                                "name": "Complex Lineless",
+                                "example": "complexlineless",
+                                "price": 33
+                            }
+                        ]
+                    },
+                    {
+                        "name": "Fur",
+                        "options": [
+                            {
+                                "name": "1-3 fur colors",
+                                "price": 0
+                            },
+                            {
+                                "name": "4-5 fur colors",
+                                "price": 7
+                            },
+                            {
+                                "name": "6+ fur colors",
+                                "price": 10
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                "name": "Sticker/Emote",
+                "examples_from": "Fur",
+                "examples": [
+                    {
+                        "name": "4fur",
+                        "url": "/commissions/emote2.jpg"
+                    },
+                    {
+                        "name": "3fur",
+                        "url": "/commissions/emote4.jpg"
+                    }
+                ],
+                "questions": [
+                    {
+                        "name": "Amount",
+                        "options": [
+                            {
+                                "name": "Individual",
+                                "example": "sticker",
+                                "price": 7
+                            },
+                            {
+                                "name": "Pack of 4",
+                                "example": "sticker",
+                                "price": 26
+                            },
+                            {
+                                "name": "Pack of 5",
+                                "example": "sticker",
+                                "price": 31
+                            },
+                            {
+                                "name": "Pack of 6",
+                                "example": "sticker",
+                                "price": 38
+                            }
+                        ]
+                    },
+                    {
+                        "name": "Fur",
+                        "options": [
+                            {
+                                "name": "1-3 fur colors",
+                                "example": "3fur",
+                                "price": 0
+                            },
+                            {
+                                "name": "4-5 fur colors",
+                                "example": "4fur",
+                                "price": 5
+                            },
+                            {
+                                "name": "6+ fur colors",
+                                "example": "4fur",
+                                "price": 8
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    },
     "tos": {
         "title": "Terms of Service",
         "description": "By commissioning Siv Kyne, you are agreeing to all of these terms and are held responsible for any noncomformities. These terms may be updated at any time without notice.",
@@ -30,8 +181,8 @@
         "ko-fi": "/icons/paw icon.png",
         "paypal": "/icons/paw icon.png",
         "trello": "/icons/paw icon.png",
-        "twitch": "/icons/paw icon.png"
-
+        "twitch": "/icons/paw icon.png",
+        "commission picker": "/icons/paw icon.png"
     },
     "frontpage": {
         "items": [
@@ -101,32 +252,38 @@
                     {
                         "name": "Sketchy",
                         "price": "$13",
-                        "picture": "/commissions/nick.jpg"
+                        "picture": "/commissions/nick.jpg",
+                        "link": "/calculator?commissions=%5B%7B%22type%22%3A%22Icon%22%2C%22name%22%3A%22Commission+1%22%2C%22example%22%3A%22%2Fcommissions%2Fnick.jpg%22%2C%22price%22%3A13%2C%22questions%22%3A%5B%7B%22name%22%3A%22Detail+level%22%2C%22options%22%3A%5B%7B%22name%22%3A%22Sketchy%22%2C%22example%22%3A%22basic%22%2C%22price%22%3A13%7D%2C%7B%22name%22%3A%22Basic%22%2C%22price%22%3A18%7D%2C%7B%22name%22%3A%22Basic+Lineless%22%2C%22example%22%3A%22complexlineless%22%2C%22price%22%3A18%7D%2C%7B%22name%22%3A%22Cell+Shaded%22%2C%22example%22%3A%22complexlineless%22%2C%22price%22%3A23%7D%2C%7B%22name%22%3A%22Ultra+Lineart%22%2C%22example%22%3A%22ultralineart%22%2C%22price%22%3A30%7D%2C%7B%22name%22%3A%22Complex+Lineart%22%2C%22example%22%3A%22complexlineless%22%2C%22price%22%3A33%7D%5D%7D%5D%2C%22answers%22%3A%5B%7B%22name%22%3A%22Detail+level%22%2C%22option%22%3A%22Sketchy%22%7D%5D%7D%5D"
                     },
                     {
                         "name": "Basic",
                         "price": "$18",
-                        "picture": "/commissions/iconbasic.jpg"
+                        "picture": "/commissions/iconbasic.jpg",
+                        "link": "/calculator?commissions=%5B%7B%22type%22%3A%22Icon%22%2C%22name%22%3A%22Commission+1%22%2C%22example%22%3A%22%2Fcommissions%2Ficonbasic.jpg%22%2C%22price%22%3A18%2C%22questions%22%3A%5B%7B%22name%22%3A%22Detail+level%22%2C%22options%22%3A%5B%7B%22name%22%3A%22Sketchy%22%2C%22example%22%3A%22sketchy%22%2C%22price%22%3A13%7D%2C%7B%22name%22%3A%22Basic%22%2C%22example%22%3A%22basic%22%2C%22price%22%3A18%7D%2C%7B%22name%22%3A%22Basic+Lineless%22%2C%22example%22%3A%22basiclineless%22%2C%22price%22%3A18%7D%2C%7B%22name%22%3A%22Cell+Shaded%22%2C%22example%22%3A%22cellshaded%22%2C%22price%22%3A23%7D%2C%7B%22name%22%3A%22Ultra+Lineart%22%2C%22example%22%3A%22ultralineart%22%2C%22price%22%3A30%7D%2C%7B%22name%22%3A%22Complex+Lineless%22%2C%22example%22%3A%22complexlineless%22%2C%22price%22%3A33%7D%5D%7D%2C%7B%22name%22%3A%22Fur%22%2C%22options%22%3A%5B%7B%22name%22%3A%221-3+fur+colors%22%2C%22price%22%3A0%7D%2C%7B%22name%22%3A%224-5+fur+colors%22%2C%22price%22%3A7%7D%2C%7B%22name%22%3A%226%2B+fur+colors%22%2C%22price%22%3A10%7D%5D%7D%5D%2C%22answers%22%3A%5B%7B%22name%22%3A%22Detail+level%22%2C%22option%22%3A%22Basic%22%7D%2C%7B%22name%22%3A%22Fur%22%2C%22option%22%3A%221-3+fur+colors%22%7D%5D%7D%5D"
                     },
                     {
                         "name": "Basic Lineless",
                         "price": "$18",
-                        "picture": "/commissions/iconbasiclineless.jpg"
+                        "picture": "/commissions/iconbasiclineless.jpg",
+                        "link": "/calculator?commissions=%5B%7B%22type%22%3A%22Icon%22%2C%22name%22%3A%22Commission+1%22%2C%22example%22%3A%22%2Fcommissions%2Ficonbasiclineless.jpg%22%2C%22price%22%3A18%2C%22questions%22%3A%5B%7B%22name%22%3A%22Detail+level%22%2C%22options%22%3A%5B%7B%22name%22%3A%22Sketchy%22%2C%22example%22%3A%22sketchy%22%2C%22price%22%3A13%7D%2C%7B%22name%22%3A%22Basic%22%2C%22example%22%3A%22basic%22%2C%22price%22%3A18%7D%2C%7B%22name%22%3A%22Basic+Lineless%22%2C%22example%22%3A%22basiclineless%22%2C%22price%22%3A18%7D%2C%7B%22name%22%3A%22Cell+Shaded%22%2C%22example%22%3A%22cellshaded%22%2C%22price%22%3A23%7D%2C%7B%22name%22%3A%22Ultra+Lineart%22%2C%22example%22%3A%22ultralineart%22%2C%22price%22%3A30%7D%2C%7B%22name%22%3A%22Complex+Lineless%22%2C%22example%22%3A%22complexlineless%22%2C%22price%22%3A33%7D%5D%7D%2C%7B%22name%22%3A%22Fur%22%2C%22options%22%3A%5B%7B%22name%22%3A%221-3+fur+colors%22%2C%22price%22%3A0%7D%2C%7B%22name%22%3A%224-5+fur+colors%22%2C%22price%22%3A7%7D%2C%7B%22name%22%3A%226%2B+fur+colors%22%2C%22price%22%3A10%7D%5D%7D%5D%2C%22answers%22%3A%5B%7B%22name%22%3A%22Detail+level%22%2C%22option%22%3A%22Basic+Lineless%22%7D%2C%7B%22name%22%3A%22Fur%22%2C%22option%22%3A%221-3+fur+colors%22%7D%5D%7D%5D"
                     },
                     {
                         "name": "Cell Shaded",
                         "price": "$23",
-                        "picture": "/commissions/iconcellshaded.jpg"
+                        "picture": "/commissions/iconcellshaded.jpg",
+                        "link": "/calculator?commissions=%5B%7B%22type%22%3A%22Icon%22%2C%22name%22%3A%22Commission+1%22%2C%22example%22%3A%22%2Fcommissions%2Ficoncellshaded.jpg%22%2C%22price%22%3A23%2C%22questions%22%3A%5B%7B%22name%22%3A%22Detail+level%22%2C%22options%22%3A%5B%7B%22name%22%3A%22Sketchy%22%2C%22example%22%3A%22sketchy%22%2C%22price%22%3A13%7D%2C%7B%22name%22%3A%22Basic%22%2C%22example%22%3A%22basic%22%2C%22price%22%3A18%7D%2C%7B%22name%22%3A%22Basic+Lineless%22%2C%22example%22%3A%22basiclineless%22%2C%22price%22%3A18%7D%2C%7B%22name%22%3A%22Cell+Shaded%22%2C%22example%22%3A%22cellshaded%22%2C%22price%22%3A23%7D%2C%7B%22name%22%3A%22Ultra+Lineart%22%2C%22example%22%3A%22ultralineart%22%2C%22price%22%3A30%7D%2C%7B%22name%22%3A%22Complex+Lineless%22%2C%22example%22%3A%22complexlineless%22%2C%22price%22%3A33%7D%5D%7D%2C%7B%22name%22%3A%22Fur%22%2C%22options%22%3A%5B%7B%22name%22%3A%221-3+fur+colors%22%2C%22price%22%3A0%7D%2C%7B%22name%22%3A%224-5+fur+colors%22%2C%22price%22%3A7%7D%2C%7B%22name%22%3A%226%2B+fur+colors%22%2C%22price%22%3A10%7D%5D%7D%5D%2C%22answers%22%3A%5B%7B%22name%22%3A%22Detail+level%22%2C%22option%22%3A%22Cell+Shaded%22%7D%2C%7B%22name%22%3A%22Fur%22%2C%22option%22%3A%221-3+fur+colors%22%7D%5D%7D%5D"
                     },
                     {
                         "name": "Ultra Lineart",
                         "price": "$30",
-                        "picture": "/commissions/iconultralineart.jpg"
+                        "picture": "/commissions/iconultralineart.jpg",
+                        "link": "/calculator?commissions=%5B%7B%22type%22%3A%22Icon%22%2C%22name%22%3A%22Commission+1%22%2C%22example%22%3A%22%2Fcommissions%2Ficonultralineart.jpg%22%2C%22price%22%3A30%2C%22questions%22%3A%5B%7B%22name%22%3A%22Detail+level%22%2C%22options%22%3A%5B%7B%22name%22%3A%22Sketchy%22%2C%22example%22%3A%22sketchy%22%2C%22price%22%3A13%7D%2C%7B%22name%22%3A%22Basic%22%2C%22example%22%3A%22basic%22%2C%22price%22%3A18%7D%2C%7B%22name%22%3A%22Basic+Lineless%22%2C%22example%22%3A%22basiclineless%22%2C%22price%22%3A18%7D%2C%7B%22name%22%3A%22Cell+Shaded%22%2C%22example%22%3A%22cellshaded%22%2C%22price%22%3A23%7D%2C%7B%22name%22%3A%22Ultra+Lineart%22%2C%22example%22%3A%22ultralineart%22%2C%22price%22%3A30%7D%2C%7B%22name%22%3A%22Complex+Lineless%22%2C%22example%22%3A%22complexlineless%22%2C%22price%22%3A33%7D%5D%7D%2C%7B%22name%22%3A%22Fur%22%2C%22options%22%3A%5B%7B%22name%22%3A%221-3+fur+colors%22%2C%22price%22%3A0%7D%2C%7B%22name%22%3A%224-5+fur+colors%22%2C%22price%22%3A7%7D%2C%7B%22name%22%3A%226%2B+fur+colors%22%2C%22price%22%3A10%7D%5D%7D%5D%2C%22answers%22%3A%5B%7B%22name%22%3A%22Detail+level%22%2C%22option%22%3A%22Ultra+Lineart%22%7D%2C%7B%22name%22%3A%22Fur%22%2C%22option%22%3A%221-3+fur+colors%22%7D%5D%7D%5D"
                     },
                     {
                         "name": "Complex Lineless",
                         "price": "$33",
-                        "picture": "/commissions/alakai again.jpg"
+                        "picture": "/commissions/alakai again.jpg",
+                        "link": "/calculator?commissions=%5B%7B%22type%22%3A%22Icon%22%2C%22name%22%3A%22Commission+1%22%2C%22example%22%3A%22%2Fcommissions%2Falakai+again.jpg%22%2C%22price%22%3A33%2C%22questions%22%3A%5B%7B%22name%22%3A%22Detail+level%22%2C%22options%22%3A%5B%7B%22name%22%3A%22Sketchy%22%2C%22example%22%3A%22sketchy%22%2C%22price%22%3A13%7D%2C%7B%22name%22%3A%22Basic%22%2C%22example%22%3A%22basic%22%2C%22price%22%3A18%7D%2C%7B%22name%22%3A%22Basic+Lineless%22%2C%22example%22%3A%22basiclineless%22%2C%22price%22%3A18%7D%2C%7B%22name%22%3A%22Cell+Shaded%22%2C%22example%22%3A%22cellshaded%22%2C%22price%22%3A23%7D%2C%7B%22name%22%3A%22Ultra+Lineart%22%2C%22example%22%3A%22ultralineart%22%2C%22price%22%3A30%7D%2C%7B%22name%22%3A%22Complex+Lineless%22%2C%22example%22%3A%22complexlineless%22%2C%22price%22%3A33%7D%5D%7D%2C%7B%22name%22%3A%22Fur%22%2C%22options%22%3A%5B%7B%22name%22%3A%221-3+fur+colors%22%2C%22price%22%3A0%7D%2C%7B%22name%22%3A%224-5+fur+colors%22%2C%22price%22%3A7%7D%2C%7B%22name%22%3A%226%2B+fur+colors%22%2C%22price%22%3A10%7D%5D%7D%5D%2C%22answers%22%3A%5B%7B%22name%22%3A%22Detail+level%22%2C%22option%22%3A%22Complex+Lineless%22%7D%2C%7B%22name%22%3A%22Fur%22%2C%22option%22%3A%221-3+fur+colors%22%7D%5D%7D%5D"
                     }
                 ]
             },
diff --git a/src/lib/footer/Footer.svelte b/src/lib/footer/Footer.svelte
index 0f1ace2..3828910 100644
--- a/src/lib/footer/Footer.svelte
+++ b/src/lib/footer/Footer.svelte
@@ -1,3 +1,5 @@
 <footer>
-    <h4 class="text-center py-20 text-sm text-gray-200">copyright {new Date().getFullYear()} -- site made by <a href="https://bartindustries.com/" target="blank" class="hover:underline border-b border-dashed hover:border-b-0">midblep</a> -- art by siv kyne -- bg art by smol-static</h4>
+    <h4 class="text-center py-20 text-sm text-gray-200">
+        copyright {new Date().getFullYear()} -- site made by <a href="https://bartindustries.com/" target="blank" class="hover:underline border-b border-dashed hover:border-b-0">midblep</a> -- art by siv kyne
+    </h4>
 </footer>
\ No newline at end of file
diff --git a/src/lib/forms/Select.svelte b/src/lib/forms/Select.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/header/Button.svelte b/src/lib/header/Button.svelte
index 6bb5740..efeb067 100644
--- a/src/lib/header/Button.svelte
+++ b/src/lib/header/Button.svelte
@@ -1,6 +1,7 @@
 <script>
-    export let href;
+    export let href = "";
     export let active = "";
+    export let added_classes = "";
 
     let classes = "hover:bg-gradient-to-tr hover:from-red-500 hover:to-pink-500 bg-red-500 duration-300 active:translate-y-1 py-2 px-3 w-full rounded-lg shadow";
 
@@ -9,8 +10,10 @@
     } else {
         classes += " bg-opacity-50";
     }
+
+    classes += " " + added_classes;
 </script>
 
-<a href={href} class={classes}>
+<a href={href} class={classes} on:click>
     <slot />
 </a>
\ No newline at end of file
diff --git a/src/lib/header/Header.svelte b/src/lib/header/Header.svelte
index aeaaa91..33213d3 100644
--- a/src/lib/header/Header.svelte
+++ b/src/lib/header/Header.svelte
@@ -1,11 +1,42 @@
-<header>
+<script>
+    import { page } from "$app/stores";
+    import Button from "./Button.svelte";
+    console.log($page.url.pathname);
+</script>
+
+<header class="relative mt-20 max-w-[1400px] mx-auto dropanim">
     <a href="/">
-        <img src="/title.png" class="w-11/12 lg:w-2/3 mb-10 lg:mb-0 mx-auto grow drop-shadow-2xl" alt="header siv kyne" />
+        <img src="/title.png" class="mb-10 lg:mb-0 mx-auto drop-shadow-2xl grow" alt="header siv kyne" />
     </a>
+    {#if $page.url.pathname != "/" && $page.url.pathname != "/calculator" }
+        <span href="/calculator" class="hidden xl:block text-s absolute w-full py-6 bottom-0 left-0 right-0 text-center hover:scale-105 transition duration-300 z-50">
+            <Button href="/calculator" added_classes="bg-opacity-100 shadow-xl">
+                🧮 Check out the new interactive commission picker!
+            </Button>
+        </span>
+    {/if}
 </header>
 
 
 <style>
+    .dropanim {
+        animation: dropanim;
+        animation-duration: 0.4s;
+        animation-timing-function: ease-in-out;
+    }
+
+    @keyframes dropanim {
+        0% {
+            transform: translateY(-50vh);
+        }
+        50% {
+            transform: translateY(1vh);
+        }
+        100% {
+            transform: translateY(0);
+        }
+    }
+
     .grow {
         animation: grow;
         animation-duration: 2s;
diff --git a/src/lib/header/Navbar.svelte b/src/lib/header/Navbar.svelte
index 01182f6..ce5af20 100644
--- a/src/lib/header/Navbar.svelte
+++ b/src/lib/header/Navbar.svelte
@@ -4,7 +4,7 @@
     export let page;
 </script>
 
-<section class="container bg-gray-800 rounded-lg shadow-lg p-3 flex flex-col lg:flex-row gap-3 justify-between justify-items-stretch items-center -mt-10 z-20">
+<section class="container bg-slate-800 rounded-lg shadow-lg p-3 flex flex-col lg:flex-row gap-3 justify-between justify-items-stretch items-center z-20">
     {#if page == "/"}
         <Button href="/" active="true">
             🏠 Home
@@ -37,11 +37,11 @@
 
     {#if page == "/contact"}
         <Button href="/contact" active="true">
-            ✉️ Social Links
+            ✉️ Socials
         </Button>
     {:else}
         <Button href="/contact">
-            ✉️ Social Links
+            ✉️ Socials
         </Button>
     {/if}
 </section>
\ No newline at end of file
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 72c5b4b..00d7a8f 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -1,7 +1,6 @@
 <script>
 	import Footer from "$lib/footer/Footer.svelte";
 	import Header from "$lib/header/Header.svelte";
-
 	import "../app.css";
 </script>
 
@@ -13,21 +12,43 @@
 </svelte:head>
 
 <main class="bg-green-600 text-white relative w-screen bg-cover bg-fixed" style="background-image: url('/bg2.png')">
-	<div class="absolute inset-0 z-0 overflow-y-hidden ">
+	<div class="absolute inset-0 z-0 overflow-y-hidden">
 		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
 			<path fill="rgb(244 63 94)" fill-opacity="1" d="M0,288L30,272C60,256,120,224,180,186.7C240,149,300,107,360,101.3C420,96,480,128,540,154.7C600,181,660,203,720,229.3C780,256,840,288,900,304C960,320,1020,320,1080,304C1140,288,1200,256,1260,224C1320,192,1380,160,1410,144L1440,128L1440,320L1410,320C1380,320,1320,320,1260,320C1200,320,1140,320,1080,320C1020,320,960,320,900,320C840,320,780,320,720,320C660,320,600,320,540,320C480,320,420,320,360,320C300,320,240,320,180,320C120,320,60,320,30,320L0,320Z"></path>
 		</svg>
-		<div class="bg-gradient-to-b from-rose-500 via-pink-800 to-gray-900 -mt-1 z-10 h-screen"></div>
-		<div class="bg-gray-900 h-full">
+		<div class="bg-gradient-to-b from-rose-500 via-pink-800 to-slate-900 -mt-1 z-10 h-screen"></div>
+		<div class="bg-slate-900 h-full">
 			<div style="background-image: url('/bg3.png')" class="h-full bg-cover bg-opacity-1 blur-xl"></div>
 		</div>
 	</div>
 
-	<article class="px-3 lg:px-0 py-10 lg:py-20 flex flex-col gap-10 h-full">
-		<div class="flex flex-col gap-10 min-h-screen z-50">
+	<article class="px-3 lg:px-0 py-0 flex flex-col gap-10 h-full">
+		<div class="flex flex-col justify-start gap-10 min-h-screen z-50">
 			<Header />
-			<slot />
-			<Footer />
+			<span class="loadanim">
+				<slot />
+				<Footer />
+			</span>
 		</div>
 	</article>
-</main>
\ No newline at end of file
+</main>
+
+<style>
+    .loadanim {
+        animation: loadanim;
+        animation-duration: 0.4s;
+        animation-timing-function: ease-in-out;
+    }
+
+    @keyframes loadanim {
+        0% {
+            transform: translateY(50vh);
+        }
+        50% {
+            transform: translateY(-1vh);
+        }
+        100% {
+            transform: translateY(0);
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/routes/about.svelte b/src/routes/about.svelte
index 982a387..d4ee648 100644
--- a/src/routes/about.svelte
+++ b/src/routes/about.svelte
@@ -14,7 +14,7 @@
 <main class="flex flex-col gap-5">
     <Navbar page="/about" />
 
-    <section class="container bg-gray-800 rounded-lg shadow-lg p-5 flex flex-col gap-5">
+    <section class="container bg-slate-800 rounded-lg shadow-lg p-5 flex flex-col gap-5">
         <h1 class="text-2xl font-bold fira-bold">{lang["title"]}</h1>
         <hr/>
         <p class="text-sm lg:text-base">
diff --git a/src/routes/calculator/__layout.reset.svelte b/src/routes/calculator/__layout.reset.svelte
new file mode 100644
index 0000000..13a9fa5
--- /dev/null
+++ b/src/routes/calculator/__layout.reset.svelte
@@ -0,0 +1,56 @@
+<script>
+    import CalculatorHeader from "$lib/calculator/CalculatorHeader.svelte";
+	import Footer from "$lib/footer/Footer.svelte";
+	import "../../app.css";
+</script>
+
+<svelte:head>
+	<meta property="og:type" content="website" />
+	<meta property="og:url" content="https://sivkyne.xyz" />
+	<meta property="og:image" content="https://sivkyne.xyz/pic.png" />
+	<meta name="theme-color" content="rgb(244 63 94)">
+</svelte:head>
+
+<main class="bg-black text-white relative w-screen">
+    <div class="absolute inset-0 w-full h-full bg-cover bg-fixed bg-bottom" style="background-image: url('/commissions/complex1.jpg')"></div>
+    <div class="absolute inset-0 h-[800px] bg-gradient-to-tr from-[#4d9937] via-[#57a940]"></div>
+	<div class="absolute inset-0 z-0 overflow-y-hidden mt-60">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
+            <path fill="rgb(244 63 94)" fill-opacity="1" d="M0,0L80,37.3C160,75,320,149,480,181.3C640,213,800,203,960,170.7C1120,139,1280,85,1360,58.7L1440,32L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path>
+        </svg>
+		<div class="bg-gradient-to-b from-rose-500 via-pink-800 to-slate-900 -mt-1 z-10 h-screen"></div>
+		<div class="bg-slate-900 h-full">
+			<div style="background-image: url('/bg3.png')" class="h-full bg-cover bg-opacity-1 blur-xl"></div>
+		</div>
+	</div>
+
+	<article class="px-3 lg:px-0 py-0 flex flex-col gap-10 h-full">
+		<div class="flex flex-col justify-start gap-10 min-h-screen z-50">
+            <CalculatorHeader/>
+			<span class="loadanim">
+				<slot />
+				<Footer />
+			</span>
+		</div>
+	</article>
+</main>
+
+<style>
+    .loadanim {
+        animation: loadanim;
+        animation-duration: 0.4s;
+        animation-timing-function: ease-in-out;
+    }
+
+    @keyframes loadanim {
+        0% {
+            transform: translateY(50vh);
+        }
+        50% {
+            transform: translateY(-1vh);
+        }
+        100% {
+            transform: translateY(0);
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/routes/calculator/index.svelte b/src/routes/calculator/index.svelte
new file mode 100644
index 0000000..c2eb7d1
--- /dev/null
+++ b/src/routes/calculator/index.svelte
@@ -0,0 +1,17 @@
+<script>
+    import words from "$lib/en-lang.json";
+    import Calculator from "$lib/calculator/Calculator.svelte";
+    import Button from "$lib/header/Button.svelte";
+
+    let lang = words["calculator"];
+</script>
+
+<svelte:head>
+    <meta property="og:title" content={lang["title"] + " || Siv Kyne"} />
+    <meta property="og:description" content={lang["description"]} />
+    <title>{lang["title"]} || Siv Kyne</title>
+</svelte:head>
+
+<main class="flex flex-col gap-5">
+    <Calculator/>
+</main>
\ No newline at end of file
diff --git a/src/routes/commissions/index.svelte b/src/routes/commissions/index.svelte
index bebc667..3188536 100644
--- a/src/routes/commissions/index.svelte
+++ b/src/routes/commissions/index.svelte
@@ -17,23 +17,31 @@
 <main class="flex flex-col gap-5">
     <Navbar page="/commissions" />
 
+    <section class="container bg-slate-800 rounded-lg shadow-lg p-5 flex flex-col">
+        <h2 class="flex gap-2 items-end">
+            <span class="font-bold text-green-500 text-xl">Pro Tip!</span>
+            Press on the pictures to visit them in the Commission Picker
+        </h2>
+    </section>
+
     {#each lang["accordions"] as accordion}
         <Accordion title={accordion["title"]} id={accordion["id"]} note={accordion["note"]} autoOpen={accordion["autoOpen"]}>
             <div class="grid grid-cols-1 lg:grid-cols-{accordion["cols"]} gap-5">
                 {#each accordion["items"] as item}
-                    <Item picture={item["picture"]} name={item["name"]} price={item["price"]} note={item["note"]} />
+                    <Item picture={item["picture"]} name={item["name"]} price={item["price"]} note={item["note"]} link={item['link']} />
                 {/each}
             </div>
         </Accordion>
     {/each}
 
-    <section class="container bg-gray-800 rounded-lg shadow-lg p-5 flex flex-col">
+    <section class="container bg-slate-800 rounded-lg shadow-lg p-5 flex flex-col">
         <div class="flex flex-wrap justify-center items-center gap-5">
             <Social href="https://trello.com/b/JfPAzQyJ/siv-kynes-commission-queue" icon="📑" text="Commission Queue" />
             <Social href="https://ko-fi.com/sivkyne" icon="☕" text="Ko-fi" />
             <Social href="https://paypal.me/sivkyne" icon="💰" text="PayPal" />
             <Social href="/contact" icon="✉️" text="Contact" />
             <Social href="/commissions/tos" icon="⚖️" text="Terms of Service" />
+            <Social href="/calculator" icon="🧮" text="Commission Picker" />
         </div>
     </section>
 
diff --git a/src/routes/commissions/tos.svelte b/src/routes/commissions/tos.svelte
index 0f60682..635fa8d 100644
--- a/src/routes/commissions/tos.svelte
+++ b/src/routes/commissions/tos.svelte
@@ -14,7 +14,7 @@
 <main class="flex flex-col gap-5">
     <Navbar page="/commissions" />
 
-    <section class="container bg-gray-800 rounded-lg shadow-lg p-5 flex flex-col gap-5">
+    <section class="container bg-slate-800 rounded-lg shadow-lg p-5 flex flex-col gap-5">
         <span>
             <h1 class="text-2xl font-bold fira-bold">{lang["title"]}</h1>
             <h3 class="text-gray-300 italic text-sm">{lang["lastEdit"]}</h3>
diff --git a/src/routes/contact.svelte b/src/routes/contact.svelte
index 804402c..28f9bda 100644
--- a/src/routes/contact.svelte
+++ b/src/routes/contact.svelte
@@ -13,26 +13,30 @@
 <main class="flex flex-col gap-5">
     <Navbar page="/contact" />
 
-    <section class="container bg-gray-800 rounded-lg shadow-lg p-5 flex flex-col">
-        <div class="flex flex-wrap justify-center items-center gap-5">
-            <Social href="/about" icon="📄" text="About Me" />
-            <Social href="https://twitter.com/SivKyne" icon="🐦" text="Twitter" />
-            <Social href="https://discord.com/invite/5JCZTv3TtF" icon="💬" text="Discord" />
-            <Social href="https://www.youtube.com/channel/UC1pnonYCZv1mi3XImhX35-A" icon="📺" text="YouTube" />
-            <Social href="https://www.deviantart.com/sivkyne" icon="🖼️" text="DeviantArt" />
-            <Social href="https://steamcommunity.com/id/sivkyne" icon="🎮" text="Steam" />
-            <Social href="https://open.spotify.com/user/uqwz46n0jki4zdwiedca5gbp2" icon="🎵" text="Spotify" />
-            <Social href="https://toyhou.se/sivkyne" icon="👪" text="Toyhouse" />
-            <Social href="https://trello.com/b/JfPAzQyJ/siv-kynes-commission-queue" icon="📑" text="Trello" />
-            <Social href="https://myanimelist.net/animelist/SivKyne" icon="🎞️" text="My Anime List" />
-            <Social href="https://ko-fi.com/sivkyne" icon="☕" text="Ko-fi" />
-            <Social href="https://paypal.me/sivkyne" icon="💰" text="PayPal" />
-            <Social href="/commissions/tos" icon="⚖️" text="Terms of Service" />
-            <Social href="https://twitch.tv/sivkyne" icon="📹" text="Twitch" />
+    <section class="container flex lg:flex-row flex-col gap-10 bg-slate-800 rounded-lg shadow-lg p-5">
+        <div class="lg:w-2/4 flex flex-col gap-5">
+            <h2 class="text-2xl font-bold font-mono">✉️ Mail me!</h2>
+            <hr/>
+            <Form />
         </div>
-    </section>
 
-    <section class="container bg-gray-800 rounded-lg shadow-lg p-5 flex flex-col">
-        <Form />
+        <div class="lg:w-2/4 flex flex-col gap-5">
+            <h2 class="text-2xl font-bold font-mono">💬 Find me online!</h2>
+            <hr/>
+            <div class="flex flex-wrap justify-center items-center gap-5">
+                <Social href="https://twitter.com/SivKyne" icon="🐦" text="Twitter" />
+                <Social href="https://discord.com/invite/5JCZTv3TtF" icon="💬" text="Discord" />
+                <Social href="https://www.youtube.com/channel/UC1pnonYCZv1mi3XImhX35-A" icon="📺" text="YouTube" />
+                <Social href="https://www.deviantart.com/sivkyne" icon="🖼️" text="DeviantArt" />
+                <Social href="https://steamcommunity.com/id/sivkyne" icon="🎮" text="Steam" />
+                <Social href="https://open.spotify.com/user/uqwz46n0jki4zdwiedca5gbp2" icon="🎵" text="Spotify" />
+                <Social href="https://toyhou.se/sivkyne" icon="👪" text="Toyhouse" />
+                <Social href="https://trello.com/b/JfPAzQyJ/siv-kynes-commission-queue" icon="📑" text="Trello" />
+                <Social href="https://myanimelist.net/animelist/SivKyne" icon="🎞️" text="My Anime List" />
+                <Social href="https://ko-fi.com/sivkyne" icon="☕" text="Ko-fi" />
+                <Social href="https://paypal.me/sivkyne" icon="💰" text="PayPal" />
+                <Social href="https://twitch.tv/sivkyne" icon="📹" text="Twitch" />
+            </div>
+        </div>
     </section>
 </main>
\ No newline at end of file
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 6d597e4..b62cbf4 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,20 +1,15 @@
 <script>
     import Card from "$lib/elements/Card.svelte";
     import Social from "$lib/elements/Social.svelte";
-    import Button from "$lib/header/Button.svelte";
-    import { onMount } from "svelte";
     import words from "$lib/en-lang.json";
     let lang = words["home"];
     let items = words["frontpage"]["items"];
 
-    onMount(() => {
-        const soundBtn = document.querySelector('#clickMeow');
-        soundBtn.addEventListener('click',() => {
-            let meow = new Audio("/squeak.mp3");
-            meow.volume = 0.1;
-            meow.play();
-        });
-    });
+    function meow() {
+        let meow = new Audio("/squeak.mp3");
+        meow.volume = 0.1;
+        meow.play();
+    }
 </script>
 
 <svelte:head>
@@ -24,11 +19,11 @@
 </svelte:head>
 
 <main class="flex flex-col gap-5">
-    <section class="container bg-gray-800 rounded-lg shadow-lg p-5 flex flex-col -mt-5 lg:mt-0 xl:-mt-5">
-        <div class="flex flex-col justify-center items-center gap-3 -mt-20 sm:-mt-28">
-            <div class="bg-gradient-to-t from-gray-800 via-gray-800 to-red-500 p-2 lg:p-3 rounded-full z-50">
-                <img src="/pic.png" id="clickMeow" class="pop w-40 h-40 sm:w-60 sm:h-60 rounded-full bg-gray-800" alt="profile pic" />
-            </div>
+    <section class="container bg-gradient-to-b from-slate-700 to-slate-800 rounded-lg shadow-lg p-5 flex flex-col -mt-5 lg:mt-0 xl:-mt-5">
+        <div class="flex flex-col justify-center items-center gap-3 -mt-20 sm:-mt-28 relative">
+            <div class="absolute inset-0 mx-auto bg-slate-700 rounded-full -z-10 w-40 h-40 sm:w-60 sm:h-60"></div>
+            <img src="/pic.png" class="absolute inset-0 mx-auto p-2 lg:p-3 pop w-40 h-40 sm:w-60 sm:h-60 rounded-full z-40" alt="profile pic" on:click={meow} />
+            <div class="h-60"></div>
 
             <h2 class="text-2xl font-bold fira-bold text-center">{lang["title"]}</h2>
             <p class="text-center">
@@ -37,7 +32,12 @@
         </div>
     </section>
 
-    <section class="container bg-gray-800 rounded-lg shadow-lg p-5 flex flex-col gap-5">
+    <section class="container bg-slate-800 rounded-lg shadow-lg p-5 flex flex-col gap-5">
+        <div class="flex flex-wrap justify-center items-center gap-5">
+            <Social href="/about" icon="📄" text="About Me" />
+            <Social href="/calculator" icon="🧮" text="Commission Picker" />
+            <Social href="/contact" icon="✉️" text="Contact" />
+        </div>
         <div class="flex flex-wrap justify-center items-center gap-5">
             <Social href="https://twitter.com/SivKyne" target="_blank" icon="🐦" text="Twitter" />
             <Social href="https://discord.com/invite/5JCZTv3TtF" target="_blank" icon="💬" text="Discord" />
@@ -47,9 +47,6 @@
             <Social href="https://open.spotify.com/user/uqwz46n0jki4zdwiedca5gbp2" target="_blank" icon="🎵" text="Spotify" />
             <Social href="https://toyhou.se/sivkyne" target="_blank" icon="👪" text="Toyhouse" />
             <Social href="https://myanimelist.net/animelist/SivKyne" target="_blank" icon="🎞️" text="My Anime List" />
-            <Social href="/about" icon="📄" text="About Me" />
-            <Social href="/contact" icon="✉️" text="Contact" />
-            <Social href="/commissions/tos" icon="⚖️" text="Terms of Service" />
             <Social href="https://twitch.tv/sivkyne" icon="📹" text="Twitch" />
         </div>
     </section>
diff --git a/static/calculator/banner.png b/static/calculator/banner.png
new file mode 100644
index 0000000..a317b9b
Binary files /dev/null and b/static/calculator/banner.png differ
diff --git a/static/calculator/bannername.png b/static/calculator/bannername.png
new file mode 100644
index 0000000..a5dabd2
Binary files /dev/null and b/static/calculator/bannername.png differ
diff --git a/static/calculator/bannertext.png b/static/calculator/bannertext.png
new file mode 100644
index 0000000..81cecb7
Binary files /dev/null and b/static/calculator/bannertext.png differ
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index f6bc035..e1b50f1 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -11,7 +11,7 @@ module.exports = {
 				sm: '100%',
 				md: '100%',
 				lg: '700px',
-				xl: '900px'
+				xl: '1000px'
 			},
 			borderWidth: {
 				DEFAULT: '1px',