diff --git a/package-lock.json b/package-lock.json
index 0d4ca1d..fcde445 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,14 +15,14 @@
         "@astrojs/tailwind": "^5.0.2",
         "astro": "^3.4.0",
         "cssnano": "^6.0.1",
+        "postcss-preset-env": "^9.3.0",
         "svelte": "^4.2.2",
         "tailwindcss": "^3.3.5",
         "typescript": "^5.3.2"
       },
       "devDependencies": {
         "autoprefixer": "^10.4.16",
-        "postcss-csso": "^6.0.1",
-        "postcss-preset-env": "^9.3.0"
+        "postcss-csso": "^6.0.1"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -638,7 +638,6 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-1.0.5.tgz",
       "integrity": "sha512-v/5ODKNBMfBl0us/WQjlfsvSlYxfZLhNMVIsuCPib2ulTwGKYbKJbwqw671+qH9Y4wvWVnu7LBChvml/wBKjFg==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -661,7 +660,6 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-3.0.2.tgz",
       "integrity": "sha512-NMVs/l7Y9eIKL5XjbCHEgGcG8LOUT2qVcRjX6EzkCdlvftHVKr2tHIPzHavfrULRZ5Q2gxrJ9f44dAlj6fX97Q==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -680,7 +678,6 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-1.1.4.tgz",
       "integrity": "sha512-ZV1TSmToiNcQL1P3hfzlzZzA02mmVkVmXGaUDUqpYUG84PmLhVSZpKX+KfxAuOcK7de04UXSQPBrAvaya6iiGg==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -703,7 +700,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-1.4.0.tgz",
       "integrity": "sha512-SlGd8E6ron24JYQPQAIzu5tvmWi1H4sDKTdA7UDnwF45oJv7AVESbOlOO1YjfBhrQFuvLWUgKiOY9DwGoAxwTA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -730,7 +726,6 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.3.2.tgz",
       "integrity": "sha512-sLYGdAdEY2x7TSw9FtmdaTrh2wFtRJO5VMbBrA8tEqEod7GEggFmxTSK9XqExib3yMuYNcvcTdCZIP6ukdjAIA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -752,7 +747,6 @@
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.2.1.tgz",
       "integrity": "sha512-Zmsf2f/CaEPWEVgw29odOj+WEVoiJy9s9NOv5GgNY9mZ1CZ7394By6wONrONrTsnNDv6F9hR02nvFihrGVGHBg==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -771,7 +765,6 @@
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.5.tgz",
       "integrity": "sha512-IxVBdYzR8pYe89JiyXQuYk4aVVoCPhMJkz6ElRwlVysjwURTsTk/bmY/z4FfeRE+CRBMlykPwXEVUg8lThv7AQ==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -794,7 +787,6 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/@csstools/postcss-cascade-layers/-/postcss-cascade-layers-4.0.1.tgz",
       "integrity": "sha512-UYFuFL9GgVnftg9v7tBvVEBRLaBeAD66euD+yYy5fYCUld9ZIWTJNCE30hm6STMEdt6FL5xzeVw1lAZ1tpvUEg==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -820,7 +812,6 @@
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/@csstools/postcss-color-function/-/postcss-color-function-3.0.7.tgz",
       "integrity": "sha512-/PIB20G1TPCXmQlaJLWIYzTZRZpj6csT4ijgnshIj/kcmniIRroAfDa0xSWnfuO1eNo0NptIaPU7jzUukWn55Q==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -848,7 +839,6 @@
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@csstools/postcss-color-mix-function/-/postcss-color-mix-function-2.0.7.tgz",
       "integrity": "sha512-57/g8aGo5eKFjEeJMiRKh8Qq43K2rCyk5ZZTvJ34TNl4zUtYU5DvLkIkOnhCtL8/a4z9oMA42aOnFPddRrScUQ==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -876,7 +866,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@csstools/postcss-exponential-functions/-/postcss-exponential-functions-1.0.1.tgz",
       "integrity": "sha512-ZLK2iSK4DUxeypGce2PnQSdYugUqDTwxnhNiq1o6OyKMNYgYs4eKbvEhFG8JKr1sJWbeqBi5jRr0017l2EWVvg==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -903,7 +892,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@csstools/postcss-font-format-keywords/-/postcss-font-format-keywords-3.0.0.tgz",
       "integrity": "sha512-ntkGj+1uDa/u6lpjPxnkPcjJn7ChO/Kcy08YxctOZI7vwtrdYvFhmE476dq8bj1yna306+jQ9gzXIG/SWfOaRg==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -928,7 +916,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@csstools/postcss-gamut-mapping/-/postcss-gamut-mapping-1.0.0.tgz",
       "integrity": "sha512-6UQyK8l9YaG5Ao5rBDcCnKHrLsHiQ1E0zeFQuqDJqEtinVzAPb/MwSw3TenZXL1Rnd7th3tb+4CBFHBXdW5tbQ==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -955,7 +942,6 @@
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/@csstools/postcss-gradients-interpolation-method/-/postcss-gradients-interpolation-method-4.0.7.tgz",
       "integrity": "sha512-GT1CzE/Tyr/ei4j5BwKESkHAgg+Gzys/0mAY7W+UiR+XrcYk5hDbOrE/YJIx1rflfO/7La1bDoZtA0YnLl4qNA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -983,7 +969,6 @@
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/@csstools/postcss-hwb-function/-/postcss-hwb-function-3.0.6.tgz",
       "integrity": "sha512-uQgWt2Ho2yy2S6qthWY7mD5v57NKxi6dD1NB8nAybU5bJSsm+hLXRGm3/zbOH4xNrqO3Cl60DFSNlSrUME3Xjg==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -1010,7 +995,6 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@csstools/postcss-ic-unit/-/postcss-ic-unit-3.0.2.tgz",
       "integrity": "sha512-n28Er7W9qc48zNjJnvTKuVHY26/+6YlA9WzJRksIHiAWOMxSH5IksXkw7FpkIOd+jLi59BMrX/BWrZMgjkLBHg==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -1036,7 +1020,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@csstools/postcss-initial/-/postcss-initial-1.0.0.tgz",
       "integrity": "sha512-1l7iHHjIl5qmVeGItugr4ZOlCREDP71mNKqoEyxlosIoiu3Os1nPWMHpuCvDLCLiWI/ONTOg3nzJh7gwHOrqUA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -1058,7 +1041,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/@csstools/postcss-is-pseudo-class/-/postcss-is-pseudo-class-4.0.3.tgz",
       "integrity": "sha512-/dt5M9Ty/x3Yiq0Nm/5PJJzwkVFchJgdjKVnryBPtoMCb9ohb/nDIJOwr/Wr3hK3FDs1EA1GE6PyRYsUmQPS8Q==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -1084,7 +1066,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-float-and-clear/-/postcss-logical-float-and-clear-2.0.0.tgz",
       "integrity": "sha512-Wki4vxsF6icRvRz8eF9bPpAvwaAt0RHwhVOyzfoFg52XiIMjb6jcbHkGxwpJXP4DVrnFEwpwmrz5aTRqOW82kg==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -1106,7 +1087,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-overflow/-/postcss-logical-overflow-1.0.0.tgz",
       "integrity": "sha512-cIrZ8f7bGGvr+W53nEuMspcwaeaI2YTmz6LZ4yiAO5z14/PQgOOv+Pn+qjvPOPoadeY2BmpaoTzZKvdAQuM17w==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -1128,7 +1108,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-overscroll-behavior/-/postcss-logical-overscroll-behavior-1.0.0.tgz",
       "integrity": "sha512-e89S2LWjnxf0SB2wNUAbqDyFb/Fow/tlOe1XqOLbNx4rf3LrQokM9qldVx7sarnddml3ORE5LDUmlKpPOOeJTA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -1150,7 +1129,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-resize/-/postcss-logical-resize-2.0.0.tgz",
       "integrity": "sha512-lCQ1aX8c5+WI4t5EoYf3alTzJNNocMqTb+u1J9CINdDhFh1fjovqK+0aHalUHsNstZmzFPNzIkU4Mb3eM9U8SA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -1175,7 +1153,6 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-viewport-units/-/postcss-logical-viewport-units-2.0.3.tgz",
       "integrity": "sha512-xeVxqND5rlQyqLGdH7rX34sIm/JbbQKxpKQP8oD1YQqUHHCLQR9NUS57WqJKajxKN6AcNAMWJhb5LUH5RfPcyA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -1200,7 +1177,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@csstools/postcss-media-minmax/-/postcss-media-minmax-1.1.0.tgz",
       "integrity": "sha512-t5Li/DPC5QmW/6VFLfUvsw/4dNYYseWR0tOXDeJg/9EKUodBgNawz5tuk5vYKtNvoj+Q08odMuXcpS5YJj0AFA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -1228,7 +1204,6 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@csstools/postcss-media-queries-aspect-ratio-number-values/-/postcss-media-queries-aspect-ratio-number-values-2.0.3.tgz",
       "integrity": "sha512-IPL8AvnwMYW+cWtp+j8cW3MFN0RyXNT4hLOvs6Rf2N+NcbvXhSyKxZuE3W9Cv4KjaNoNoGx1d0UhT6tktq6tUw==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -1255,7 +1230,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@csstools/postcss-nested-calc/-/postcss-nested-calc-3.0.0.tgz",
       "integrity": "sha512-HsB66aDWAouOwD/GcfDTS0a7wCuVWaTpXcjl5VKP0XvFxDiU+r0T8FG7xgb6ovZNZ+qzvGIwRM+CLHhDgXrYgQ==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -1280,7 +1254,6 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@csstools/postcss-normalize-display-values/-/postcss-normalize-display-values-3.0.1.tgz",
       "integrity": "sha512-nUvRxI+ALJwkxZdPU4EDyuM380vP91sAGvI3jAOHs/sr3jfcCOzLkY6xKI1Mr526kZ3RivmMoYM/xq+XFyE/bw==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -1305,7 +1278,6 @@
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/@csstools/postcss-oklab-function/-/postcss-oklab-function-3.0.7.tgz",
       "integrity": "sha512-vBFTQD3CARB3u/XIGO44wWbcO7xG/4GsYqJlcPuUGRSK8mtxes6n4vvNFlIByyAZy2k4d4RY63nyvTbMpeNTaQ==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -1333,7 +1305,6 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@csstools/postcss-progressive-custom-properties/-/postcss-progressive-custom-properties-3.0.2.tgz",
       "integrity": "sha512-YEvTozk1SxnV/PGL5DllBVDuLQ+jiQhyCSQiZJ6CwBMU5JQ9hFde3i1qqzZHuclZfptjrU0JjlX4ePsOhxNzHw==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -1358,7 +1329,6 @@
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@csstools/postcss-relative-color-syntax/-/postcss-relative-color-syntax-2.0.7.tgz",
       "integrity": "sha512-2AiFbJSVF4EyymLxme4JzSrbXykHolx8DdZECHjYKMhoulhKLltx5ccYgtrK3BmXGd3v3nJrWFCc8JM8bjuiOg==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -1386,7 +1356,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@csstools/postcss-scope-pseudo-class/-/postcss-scope-pseudo-class-3.0.0.tgz",
       "integrity": "sha512-GFNVsD97OuEcfHmcT0/DAZWAvTM/FFBDQndIOLawNc1Wq8YqpZwBdHa063Lq+Irk7azygTT+Iinyg3Lt76p7rg==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -1411,7 +1380,6 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@csstools/postcss-stepped-value-functions/-/postcss-stepped-value-functions-3.0.2.tgz",
       "integrity": "sha512-I3wX44MZVv+tDuWfrd3BTvRB/YRIM2F5v1MBtTI89sxpFn47mNpTwpPYUOGPVCgKlRDfZSlxIUYhUQmqRQZZFQ==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -1438,7 +1406,6 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@csstools/postcss-text-decoration-shorthand/-/postcss-text-decoration-shorthand-3.0.3.tgz",
       "integrity": "sha512-d5J9m49HhqXRcw1S6vTZuviHi/iknUKGjBpChiNK1ARg9sSa3b8m5lsWz5Izs8ISORZdv2bZRwbw5Z2R6gQ9kQ==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -1464,7 +1431,6 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@csstools/postcss-trigonometric-functions/-/postcss-trigonometric-functions-3.0.2.tgz",
       "integrity": "sha512-AwzNhF4QOKaLOKvMljwwFkeYXwufhRO15G+kKohHkyoNOL75xWkN+W2Y9ik9tSeAyDv+cYNlYaF+o/a79WjVjg==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -1491,7 +1457,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@csstools/postcss-unset-value/-/postcss-unset-value-3.0.0.tgz",
       "integrity": "sha512-P0JD1WHh3avVyKKRKjd0dZIjCEeaBer8t1BbwGMUDtSZaLhXlLNBqZ8KkqHzYWXOJgHleXAny2/sx8LYl6qhEA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -1513,7 +1478,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.0.tgz",
       "integrity": "sha512-hBI9tfBtuPIi885ZsZ32IMEU/5nlZH/KOVYJCOh7gyMxaVLGmLedYqFN6Ui1LXkI8JlC8IsuC0rF0btcRZKd5g==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -3124,7 +3088,6 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-6.0.0.tgz",
       "integrity": "sha512-VbfLlOWO7sBHBTn6pwDQzc07Z0SDydgDBfNfCE0nvrehdBNv9RKsuupIRa/qal0+fBZhAALyQDPMKz5lnvcchw==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -3160,7 +3123,6 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-6.0.0.tgz",
       "integrity": "sha512-X+r+JBuoO37FBOWVNhVJhxtSBUFHgHbrcc0CjFT28JEdOw1qaDwABv/uunyodUuSy2hMPe9j/HjssxSlvUmKjg==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -3187,7 +3149,6 @@
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-9.0.0.tgz",
       "integrity": "sha512-03QGAk/FXIRseDdLb7XAiu6gidQ0Nd8945xuM7VFVPpc6goJsG9uIO8xQjTxwbPdPIIV4o4AJoOJyt8gwDl67g==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -3247,7 +3208,6 @@
       "version": "7.9.0",
       "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.9.0.tgz",
       "integrity": "sha512-WPMT9seTQq6fPAa1yN4zjgZZeoTriSN2LqW9C+otjar12DQIWA4LuSfFrvFJiKp4oD0xIk1vumDLw8K9ur4NBw==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -6594,7 +6554,6 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-6.0.2.tgz",
       "integrity": "sha512-IRuCwwAAQbgaLhxQdQcIIK0dCVXg3XDUnzgKD8iwdiYdwU4rMWRWyl/W9/0nA4ihVpq5pyALiHB2veBJ0292pw==",
-      "dev": true,
       "dependencies": {
         "postcss-selector-parser": "^6.0.10"
       },
@@ -6628,7 +6587,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/postcss-clamp/-/postcss-clamp-4.1.0.tgz",
       "integrity": "sha512-ry4b1Llo/9zz+PKC+030KUnPITTJAHeOwjfAyyB60eT0AorGLdzp52s31OsPRHRf8NchkgFoG2y6fCfn1IV1Ow==",
-      "dev": true,
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
       },
@@ -6643,7 +6601,6 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-6.0.2.tgz",
       "integrity": "sha512-FsjSmlSufuiFBsIqQ++VxFmvX7zKndZpBkHmfXr4wqhvzM92FTEkAh703iqWTl1U3faTgqioIqCbfqdWiFVwtw==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -6669,7 +6626,6 @@
       "version": "9.0.2",
       "resolved": "https://registry.npmjs.org/postcss-color-hex-alpha/-/postcss-color-hex-alpha-9.0.2.tgz",
       "integrity": "sha512-SfPjgr//VQ/DOCf80STIAsdAs7sbIbxATvVmd+Ec7JvR8onz9pjawhq3BJM3Pie40EE3TyB0P6hft16D33Nlyg==",
-      "dev": true,
       "dependencies": {
         "postcss-value-parser": "^4.2.0"
       },
@@ -6688,7 +6644,6 @@
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-9.0.1.tgz",
       "integrity": "sha512-ds4cq5BjRieizVb2PnvbJ0omg9VCo2/KzluvoFZbxuGpsGJ5BQSD93CHBooinEtangCM5YqUOerGDl4xGmOb6Q==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -6761,7 +6716,6 @@
       "version": "10.0.2",
       "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-10.0.2.tgz",
       "integrity": "sha512-zcEFNRmDm2fZvTPdI1pIW3W//UruMcLosmMiCdpQnrCsTRzWlKQPYMa1ud9auL0BmrryKK1+JjIGn19K0UjO/w==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -6789,7 +6743,6 @@
       "version": "13.3.2",
       "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-13.3.2.tgz",
       "integrity": "sha512-2Coszybpo8lpLY24vy2CYv9AasiZ39/bs8Imv0pWMq55Gl8NWzfc24OAo3zIX7rc6uUJAqESnVOMZ6V6lpMjJA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -6817,7 +6770,6 @@
       "version": "7.1.6",
       "resolved": "https://registry.npmjs.org/postcss-custom-selectors/-/postcss-custom-selectors-7.1.6.tgz",
       "integrity": "sha512-svsjWRaxqL3vAzv71dV0/65P24/FB8TbPX+lWyyf9SZ7aZm4S4NhCn7N3Bg+Z5sZunG3FS8xQ80LrCU9hb37cw==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -6845,7 +6797,6 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-8.0.0.tgz",
       "integrity": "sha512-Oy5BBi0dWPwij/IA+yDYj+/OBMQ9EPqAzTHeSNUYrUWdll/PRJmcbiUj0MNcsBi681I1gcSTLvMERPaXzdbvJg==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -6914,7 +6865,6 @@
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/postcss-double-position-gradients/-/postcss-double-position-gradients-5.0.2.tgz",
       "integrity": "sha512-KTbvdOOy8z8zb0BTkEg4/1vqlRlApdvjw8/pFoehgQl0WVO+fezDGlvo0B8xRA+XccA7ohkQCULKNsiNOx70Cw==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -6940,7 +6890,6 @@
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-9.0.0.tgz",
       "integrity": "sha512-zA4TbVaIaT8npZBEROhZmlc+GBKE8AELPHXE7i4TmIUEQhw/P/mSJfY9t6tBzpQ1rABeGtEOHYrW4SboQeONMQ==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -6965,7 +6914,6 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/postcss-focus-within/-/postcss-focus-within-8.0.0.tgz",
       "integrity": "sha512-E7+J9nuQzZaA37D/MUZMX1K817RZGDab8qw6pFwzAkDd/QtlWJ9/WTKmzewNiuxzeq6WWY7ATiRePVoDKp+DnA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -6990,7 +6938,6 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/postcss-font-variant/-/postcss-font-variant-5.0.0.tgz",
       "integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==",
-      "dev": true,
       "peerDependencies": {
         "postcss": "^8.1.0"
       }
@@ -6999,7 +6946,6 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-5.0.0.tgz",
       "integrity": "sha512-YjsEEL6890P7MCv6fch6Am1yq0EhQCJMXyT4LBohiu87+4/WqR7y5W3RIv53WdA901hhytgRvjlrAhibhW4qsA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -7021,7 +6967,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/postcss-image-set-function/-/postcss-image-set-function-6.0.1.tgz",
       "integrity": "sha512-VlZncC9hhZ5tg0JllY4g6Z28BeoPO8DIkelioEEkXL0AA0IORlqYpTi2L8TUnl4YQrlwvBgxVy+mdZJw5R/cIQ==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -7080,7 +7025,6 @@
       "version": "6.0.7",
       "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-6.0.7.tgz",
       "integrity": "sha512-4d1lhDVPukHFqkMv4G5vVcK+tgY52vwb5uR1SWKOaO5389r2q8fMxBWuXSW+YtbCOEGP0/X9KERi9E9le2pJuw==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -7136,7 +7080,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-7.0.0.tgz",
       "integrity": "sha512-zYf3vHkoW82f5UZTEXChTJvH49Yl9X37axTZsJGxrCG2kOUwtaAoz9E7tqYg0lsIoJLybaL8fk/2mOi81zVIUw==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -7271,7 +7214,6 @@
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-12.0.1.tgz",
       "integrity": "sha512-6LCqCWP9pqwXw/njMvNK0hGY44Fxc4B2EsGbn6xDcxbNRzP8GYoxT7yabVVMLrX3quqOJ9hg2jYMsnkedOf8pA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -7421,7 +7363,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/postcss-opacity-percentage/-/postcss-opacity-percentage-2.0.0.tgz",
       "integrity": "sha512-lyDrCOtntq5Y1JZpBFzIWm2wG9kbEdujpNt4NLannF+J9c8CgFIzPa80YQfdza+Y+yFfzbYj/rfoOsYsooUWTQ==",
-      "dev": true,
       "funding": [
         {
           "type": "kofi",
@@ -7458,7 +7399,6 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-5.0.0.tgz",
       "integrity": "sha512-2rlxDyeSics/hC2FuMdPnWiP9WUPZ5x7FTuArXLFVpaSQ2woPSfZS4RD59HuEokbZhs/wPUQJ1E3MT6zVv94MQ==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -7483,7 +7423,6 @@
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-3.0.4.tgz",
       "integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==",
-      "dev": true,
       "peerDependencies": {
         "postcss": "^8"
       }
@@ -7492,7 +7431,6 @@
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/postcss-place/-/postcss-place-9.0.0.tgz",
       "integrity": "sha512-qLEPD9VPH5opDVemwmRaujODF9nExn24VOC3ghgVLEvfYN7VZLwJHes0q/C9YR5hI2UC3VgBE8Wkdp1TxCXhtg==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -7517,7 +7455,6 @@
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-9.3.0.tgz",
       "integrity": "sha512-ycw6doPrqV6QxDCtgiyGDef61bEfiSc59HGM4gOw/wxQxmKnhuEery61oOC/5ViENz/ycpRsuhTexs1kUBTvVw==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -7601,7 +7538,6 @@
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-9.0.0.tgz",
       "integrity": "sha512-QNCYIL98VKFKY6HGDEJpF6+K/sg9bxcUYnOmNHJxZS5wsFDFaVoPeG68WAuhsqwbIBSo/b9fjEnTwY2mTSD+uA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -7655,7 +7591,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-4.0.0.tgz",
       "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==",
-      "dev": true,
       "peerDependencies": {
         "postcss": "^8.0.3"
       }
@@ -7664,7 +7599,6 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/postcss-selector-not/-/postcss-selector-not-7.0.1.tgz",
       "integrity": "sha512-1zT5C27b/zeJhchN7fP0kBr16Cc61mu7Si9uWWLoA3Px/D9tIJPKchJCkUH3tPO5D0pCFmGeApAv8XpXBQJ8SQ==",
-      "dev": true,
       "dependencies": {
         "postcss-selector-parser": "^6.0.10"
       },
diff --git a/package.json b/package.json
index eebc8b1..78e6303 100644
--- a/package.json
+++ b/package.json
@@ -19,11 +19,11 @@
     "cssnano": "^6.0.1",
     "svelte": "^4.2.2",
     "tailwindcss": "^3.3.5",
-    "typescript": "^5.3.2"
+    "typescript": "^5.3.2",
+    "postcss-preset-env": "^9.3.0"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.16",
-    "postcss-csso": "^6.0.1",
-    "postcss-preset-env": "^9.3.0"
+    "postcss-csso": "^6.0.1"
   }
 }
diff --git a/src/components/client/SingleAnswerQuiz.svelte b/src/components/client/SingleAnswerQuiz.svelte
new file mode 100644
index 0000000..6f02cc8
--- /dev/null
+++ b/src/components/client/SingleAnswerQuiz.svelte
@@ -0,0 +1,86 @@
+<script>
+  let mock = [
+    {
+      question: "What type of framework is Next.js?",
+      answerOptions: [
+        { answer: "Frontend" },
+        { answer: "Backend" },
+        { answer: "FullStack", isCorrect: true },
+        { answer: "None of the above" },
+      ],
+    },
+    {
+      question: "When was Next.js released?",
+      answerOptions: [
+        { answer: "20 September 2019" },
+        { answer: "14 January 2017" },
+        { answer: "25 October 2016", isCorrect: true },
+        { answer: "28 March 2018" },
+      ],
+    },
+    {
+      question: "Which CSS Framework are we using?",
+      answerOptions: [
+        { answer: "Bootstrap" },
+        { answer: "TailwindCSS", isCorrect: true },
+        { answer: "Chakra UI" },
+        { answer: "Bulma CSS" },
+      ],
+    },
+    {
+      question:
+        "Which class in Tailwind is used to set flex direction of column?",
+      answerOptions: [
+        { answer: "col" },
+        { answer: "col-flex" },
+        { answer: "flex-col", isCorrect: true },
+        { answer: "None of the above" },
+      ],
+    },
+  ];
+  let currentIndex = 0;
+  let answer;
+
+  const nextQuestion = (reverse = false) => {
+    if (reverse && currentIndex > 0) {
+      currentIndex--;
+    } else if (!reverse && currentIndex < mock.length - 1) {
+      currentIndex++;
+    }
+  };
+</script>
+
+<fieldset
+  class="flex flex-col items-start w-full border shadow rounded-lg px-8 py-4"
+>
+  <legend class="text-xl">Question {currentIndex + 1} of {mock.length}</legend>
+  <h3 class="text-2xl">{mock[currentIndex].question}</h3>
+  <div class="w-full my-4 space-y-2">
+    {#each mock[currentIndex].answerOptions as option}
+      <div class="flex w-full border rounded-xl shadow-sm">
+        <input
+          type="radio"
+          bind:group={answer}
+          value={option.answer}
+          id={`radio-${option.answer}`}
+          class="ml-8"
+        />
+        <label for={`radio-${option.answer}`} class="w-full p-4"
+          >{option.answer}</label
+        >
+      </div>
+    {/each}
+  </div>
+  <div class="flex flex-row-reverse justify-between w-full">
+    <button
+      on:click={() => nextQuestion()}
+      class="bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-xl shadow-md"
+      >Next</button
+    >
+    <button
+      on:click={() => nextQuestion(true)}
+      class="bg-transparent hover:bg-purple-500 text-purple-700 font-semibold hover:text-white py-2 px-4 border border-purple-500 hover:border-transparent rounded-xl"
+      >Previous</button
+    >
+  </div>
+</fieldset>
diff --git a/src/content/101-git/index.md b/src/content/101-git/0.md
similarity index 100%
rename from src/content/101-git/index.md
rename to src/content/101-git/0.md
diff --git a/src/content/101-web/index.md b/src/content/101-web/0.md
similarity index 100%
rename from src/content/101-web/index.md
rename to src/content/101-web/0.md
diff --git a/src/content/101-web/html/index.md b/src/content/101-web/html/0.md
similarity index 100%
rename from src/content/101-web/html/index.md
rename to src/content/101-web/html/0.md
diff --git a/src/content/101-web/js/index.md b/src/content/101-web/js/0.md
similarity index 100%
rename from src/content/101-web/js/index.md
rename to src/content/101-web/js/0.md
diff --git a/src/pages/kurssit/index.astro b/src/pages/kurssit/index.astro
index af476da..42ff3bc 100644
--- a/src/pages/kurssit/index.astro
+++ b/src/pages/kurssit/index.astro
@@ -3,14 +3,15 @@ import Heading2 from "@components/headings/Heading2.astro";
 import Heading1 from "@components/headings/Heading1.astro";
 import Layout from "@layouts/Layout.astro";
 import Link from "@components/common/Link.astro";
+import SingleAnswerQuiz from "@components/client/SingleAnswerQuiz.svelte";
 ---
 
 <Layout title="Kurssit">
   <Heading1>Kurssit</Heading1>
   <p>
-    Niinku eräs koodari aikoinaan sanoi *Keep it stupid simple*. Loput oli
-    historiaa. Tämän sanoman innoittamana kurssin kontentti pyritään pitämään
-    mahdollisimman yksinkertaisena.
+    Oletko kiinnostunut luomaan dynaamisia ja houkuttelevia verkkosivustoja tai
+    -sovelluksia? Tämä kurssi tarjoaa sinulle vankat perusteet web-kehityksestä
+    ja johdannon nykyaikaisiin teknologioihin.
   </p>
   <Heading2>Aloittelijaystävälliset kurssit</Heading2>
   <ul>
@@ -22,4 +23,5 @@ import Link from "@components/common/Link.astro";
     Odota vähän. Ehkä sitä joku päivä jaksaa kirjoittaa vähän haastavempaa
     materiaalia.
   </p>
+  <SingleAnswerQuiz client:visible />
 </Layout>