From 95d1681053ab1532175c45b1fe6a84a34b806e4b Mon Sep 17 00:00:00 2001
From: ota-prokopec <otaprokopec@gmail.com>
Date: Fri, 26 Aug 2022 22:26:48 +0200
Subject: [PATCH] male zmeny

---
 package-lock.json                             | 844 ++++++++++++++++--
 package.json                                  |   5 +-
 src/App.svelte                                |   7 +
 src/app.css                                   |   3 +
 src/lib/{ => Components}/Button.svelte        |   9 +-
 src/lib/{ => Components}/Heading.svelte       |   0
 src/lib/{ => Components}/Image.svelte         |   0
 .../MyComponents}/Icons/Point.svelte          |   0
 .../MyComponents}/Icons/Share.svelte          |   0
 .../MyComponents}/Icons/Star.svelte           |   0
 .../MyComponents}/ImageSlider.svelte          |   0
 src/lib/Components/MyComponents/Layout.svelte |  11 +
 .../MyComponents/Quiz/Heading.svelte          |  17 +
 .../MyComponents/Quiz/QuizWrap.svelte         |  13 +
 .../MyComponents/Quiz/answers/CheckBox.svelte |  36 +
 .../MyComponents/Quiz/answers/Input.svelte    |  22 +
 .../MyComponents/Sharebutton.svelte           |  56 ++
 .../MyComponents/game}/Bubble.svelte          |   0
 .../MyComponents/game}/Heading.svelte         |   0
 .../MyComponents/game}/Map.svelte             |   0
 .../MyComponents/game}/Tab.svelte             |  11 +-
 src/lib/{ => Components}/Overlay.svelte       |  35 +-
 src/lib/{ => Components}/Section.svelte       |   8 +-
 src/lib/Ota/Sharebutton.svelte                |  30 -
 src/main.js                                   |   3 +-
 src/main.scss                                 |  15 +
 src/routes/game.svelte                        |  22 +-
 src/routes/quiz.svelte                        |  83 ++
 src/routes/try.svelte                         |   2 +-
 tailwind.config.cjs                           |   8 +
 vite.config.js                                |  18 +-
 31 files changed, 1136 insertions(+), 122 deletions(-)
 create mode 100644 src/app.css
 rename src/lib/{ => Components}/Button.svelte (75%)
 rename src/lib/{ => Components}/Heading.svelte (100%)
 rename src/lib/{ => Components}/Image.svelte (100%)
 rename src/lib/{Ota => Components/MyComponents}/Icons/Point.svelte (100%)
 rename src/lib/{Ota => Components/MyComponents}/Icons/Share.svelte (100%)
 rename src/lib/{Ota => Components/MyComponents}/Icons/Star.svelte (100%)
 rename src/lib/{Ota => Components/MyComponents}/ImageSlider.svelte (100%)
 create mode 100644 src/lib/Components/MyComponents/Layout.svelte
 create mode 100644 src/lib/Components/MyComponents/Quiz/Heading.svelte
 create mode 100644 src/lib/Components/MyComponents/Quiz/QuizWrap.svelte
 create mode 100644 src/lib/Components/MyComponents/Quiz/answers/CheckBox.svelte
 create mode 100644 src/lib/Components/MyComponents/Quiz/answers/Input.svelte
 create mode 100644 src/lib/Components/MyComponents/Sharebutton.svelte
 rename src/lib/{Ota => Components/MyComponents/game}/Bubble.svelte (100%)
 rename src/lib/{Ota => Components/MyComponents/game}/Heading.svelte (100%)
 rename src/lib/{Ota => Components/MyComponents/game}/Map.svelte (100%)
 rename src/lib/{Ota => Components/MyComponents/game}/Tab.svelte (60%)
 rename src/lib/{ => Components}/Overlay.svelte (52%)
 rename src/lib/{ => Components}/Section.svelte (77%)
 delete mode 100644 src/lib/Ota/Sharebutton.svelte
 create mode 100644 src/routes/quiz.svelte
 create mode 100644 tailwind.config.cjs

diff --git a/package-lock.json b/package-lock.json
index b46d7fa..3268bb7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,15 +12,51 @@
 			},
 			"devDependencies": {
 				"@sveltejs/vite-plugin-svelte": "^1.0.1",
-				"autoprefixer": "^10.4.7",
-				"postcss": "^8.4.14",
+				"autoprefixer": "^10.4.8",
+				"postcss": "^8.4.16",
 				"postcss-load-config": "^4.0.1",
 				"sass": "^1.53.0",
 				"svelte": "^3.49.0",
 				"svelte-preprocess": "^4.10.7",
+				"tailwindcss": "^3.1.8",
 				"vite": "^3.0.0"
 			}
 		},
+		"node_modules/@nodelib/fs.scandir": {
+			"version": "2.1.5",
+			"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+			"integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+			"dev": true,
+			"dependencies": {
+				"@nodelib/fs.stat": "2.0.5",
+				"run-parallel": "^1.1.9"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/@nodelib/fs.stat": {
+			"version": "2.0.5",
+			"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+			"integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+			"dev": true,
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/@nodelib/fs.walk": {
+			"version": "1.2.8",
+			"resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+			"integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+			"dev": true,
+			"dependencies": {
+				"@nodelib/fs.scandir": "2.1.5",
+				"fastq": "^1.6.0"
+			},
+			"engines": {
+				"node": ">= 8"
+			}
+		},
 		"node_modules/@rollup/pluginutils": {
 			"version": "4.2.1",
 			"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
@@ -82,6 +118,38 @@
 				"@types/node": "*"
 			}
 		},
+		"node_modules/acorn": {
+			"version": "7.4.1",
+			"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+			"integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+			"dev": true,
+			"bin": {
+				"acorn": "bin/acorn"
+			},
+			"engines": {
+				"node": ">=0.4.0"
+			}
+		},
+		"node_modules/acorn-node": {
+			"version": "1.8.2",
+			"resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
+			"integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
+			"dev": true,
+			"dependencies": {
+				"acorn": "^7.0.0",
+				"acorn-walk": "^7.0.0",
+				"xtend": "^4.0.2"
+			}
+		},
+		"node_modules/acorn-walk": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
+			"integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.4.0"
+			}
+		},
 		"node_modules/anymatch": {
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
@@ -95,10 +163,16 @@
 				"node": ">= 8"
 			}
 		},
+		"node_modules/arg": {
+			"version": "5.0.2",
+			"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+			"integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+			"dev": true
+		},
 		"node_modules/autoprefixer": {
-			"version": "10.4.7",
-			"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.7.tgz",
-			"integrity": "sha512-ypHju4Y2Oav95SipEcCcI5J7CGPuvz8oat7sUtYj3ClK44bldfvtvcxK6IEK++7rqB7YchDGzweZIBG+SD0ZAA==",
+			"version": "10.4.8",
+			"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.8.tgz",
+			"integrity": "sha512-75Jr6Q/XpTqEf6D2ltS5uMewJIx5irCU1oBYJrWjFenq/m12WRRrz6g15L1EIoYvPLXTbEry7rDOwrcYNj77xw==",
 			"dev": true,
 			"funding": [
 				{
@@ -111,8 +185,8 @@
 				}
 			],
 			"dependencies": {
-				"browserslist": "^4.20.3",
-				"caniuse-lite": "^1.0.30001335",
+				"browserslist": "^4.21.3",
+				"caniuse-lite": "^1.0.30001373",
 				"fraction.js": "^4.2.0",
 				"normalize-range": "^0.1.2",
 				"picocolors": "^1.0.0",
@@ -166,9 +240,9 @@
 			}
 		},
 		"node_modules/browserslist": {
-			"version": "4.21.1",
-			"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.1.tgz",
-			"integrity": "sha512-Nq8MFCSrnJXSc88yliwlzQe3qNe3VntIjhsArW9IJOEPSHNx23FalwApUVbzAWABLhYJJ7y8AynWI/XM8OdfjQ==",
+			"version": "4.21.3",
+			"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.3.tgz",
+			"integrity": "sha512-898rgRXLAyRkM1GryrrBHGkqA5hlpkV5MhtZwg9QXeiyLUYs2k00Un05aX5l2/yJIOObYKOpS2JNo8nJDE7fWQ==",
 			"dev": true,
 			"funding": [
 				{
@@ -181,10 +255,10 @@
 				}
 			],
 			"dependencies": {
-				"caniuse-lite": "^1.0.30001359",
-				"electron-to-chromium": "^1.4.172",
-				"node-releases": "^2.0.5",
-				"update-browserslist-db": "^1.0.4"
+				"caniuse-lite": "^1.0.30001370",
+				"electron-to-chromium": "^1.4.202",
+				"node-releases": "^2.0.6",
+				"update-browserslist-db": "^1.0.5"
 			},
 			"bin": {
 				"browserslist": "cli.js"
@@ -202,10 +276,19 @@
 				"node": "*"
 			}
 		},
+		"node_modules/camelcase-css": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+			"integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+			"dev": true,
+			"engines": {
+				"node": ">= 6"
+			}
+		},
 		"node_modules/caniuse-lite": {
-			"version": "1.0.30001366",
-			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001366.tgz",
-			"integrity": "sha512-yy7XLWCubDobokgzudpkKux8e0UOOnLHE6mlNJBzT3lZJz6s5atSEzjoL+fsCPkI0G8MP5uVdDx1ur/fXEWkZA==",
+			"version": "1.0.30001383",
+			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001383.tgz",
+			"integrity": "sha512-swMpEoTp5vDoGBZsYZX7L7nXHe6dsHxi9o6/LKf/f0LukVtnrxly5GVb/fWdCDTqi/yw6Km6tiJ0pmBacm0gbg==",
 			"dev": true,
 			"funding": [
 				{
@@ -245,12 +328,30 @@
 				"fsevents": "~2.3.2"
 			}
 		},
+		"node_modules/color-name": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+			"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+			"dev": true
+		},
 		"node_modules/concat-map": {
 			"version": "0.0.1",
 			"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
 			"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
 			"dev": true
 		},
+		"node_modules/cssesc": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+			"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+			"dev": true,
+			"bin": {
+				"cssesc": "bin/cssesc"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
 		"node_modules/debug": {
 			"version": "4.3.4",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -282,6 +383,12 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/defined": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
+			"integrity": "sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ==",
+			"dev": true
+		},
 		"node_modules/detect-indent": {
 			"version": "6.1.0",
 			"resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-6.1.0.tgz",
@@ -291,10 +398,39 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/detective": {
+			"version": "5.2.1",
+			"resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
+			"integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
+			"dev": true,
+			"dependencies": {
+				"acorn-node": "^1.8.2",
+				"defined": "^1.0.0",
+				"minimist": "^1.2.6"
+			},
+			"bin": {
+				"detective": "bin/detective.js"
+			},
+			"engines": {
+				"node": ">=0.8.0"
+			}
+		},
+		"node_modules/didyoumean": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+			"integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+			"dev": true
+		},
+		"node_modules/dlv": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+			"integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+			"dev": true
+		},
 		"node_modules/electron-to-chromium": {
-			"version": "1.4.188",
-			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.188.tgz",
-			"integrity": "sha512-Zpa1+E+BVmD/orkyz1Z2dAT1XNUuVAHB3GrogfyY66dXN0ZWSsygI8+u6QTDai1ZayLcATDJpcv2Z2AZjEcr1A==",
+			"version": "1.4.232",
+			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.232.tgz",
+			"integrity": "sha512-nd+FW8xHjM+PxNWG44nKnwHaBDdVpJUZuI2sS2JJPt/QpdombnmoCRWEEQNnzaktdIQhsNWdD+dlqxwO8Bn99g==",
 			"dev": true
 		},
 		"node_modules/es6-promise": {
@@ -673,6 +809,31 @@
 			"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
 			"dev": true
 		},
+		"node_modules/fast-glob": {
+			"version": "3.2.11",
+			"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
+			"integrity": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==",
+			"dev": true,
+			"dependencies": {
+				"@nodelib/fs.stat": "^2.0.2",
+				"@nodelib/fs.walk": "^1.2.3",
+				"glob-parent": "^5.1.2",
+				"merge2": "^1.3.0",
+				"micromatch": "^4.0.4"
+			},
+			"engines": {
+				"node": ">=8.6.0"
+			}
+		},
+		"node_modules/fastq": {
+			"version": "1.13.0",
+			"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
+			"integrity": "sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==",
+			"dev": true,
+			"dependencies": {
+				"reusify": "^1.0.4"
+			}
+		},
 		"node_modules/fill-range": {
 			"version": "7.0.1",
 			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -888,6 +1049,28 @@
 				"node": ">=12"
 			}
 		},
+		"node_modules/merge2": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+			"integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+			"dev": true,
+			"engines": {
+				"node": ">= 8"
+			}
+		},
+		"node_modules/micromatch": {
+			"version": "4.0.5",
+			"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+			"integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+			"dev": true,
+			"dependencies": {
+				"braces": "^3.0.2",
+				"picomatch": "^2.3.1"
+			},
+			"engines": {
+				"node": ">=8.6"
+			}
+		},
 		"node_modules/min-indent": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@@ -978,6 +1161,15 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/object-hash": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+			"integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+			"dev": true,
+			"engines": {
+				"node": ">= 6"
+			}
+		},
 		"node_modules/once": {
 			"version": "1.4.0",
 			"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -1029,10 +1221,19 @@
 				"url": "https://github.com/sponsors/jonschlinkert"
 			}
 		},
+		"node_modules/pify": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+			"integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/postcss": {
-			"version": "8.4.14",
-			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
-			"integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+			"version": "8.4.16",
+			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
+			"integrity": "sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==",
 			"dev": true,
 			"funding": [
 				{
@@ -1053,6 +1254,42 @@
 				"node": "^10 || ^12 || >=14"
 			}
 		},
+		"node_modules/postcss-import": {
+			"version": "14.1.0",
+			"resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
+			"integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
+			"dev": true,
+			"dependencies": {
+				"postcss-value-parser": "^4.0.0",
+				"read-cache": "^1.0.0",
+				"resolve": "^1.1.7"
+			},
+			"engines": {
+				"node": ">=10.0.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.0.0"
+			}
+		},
+		"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/"
+			},
+			"peerDependencies": {
+				"postcss": "^8.3.3"
+			}
+		},
 		"node_modules/postcss-load-config": {
 			"version": "4.0.1",
 			"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz",
@@ -1082,12 +1319,85 @@
 				}
 			}
 		},
+		"node_modules/postcss-nested": {
+			"version": "5.0.6",
+			"resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz",
+			"integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==",
+			"dev": true,
+			"dependencies": {
+				"postcss-selector-parser": "^6.0.6"
+			},
+			"engines": {
+				"node": ">=12.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/postcss/"
+			},
+			"peerDependencies": {
+				"postcss": "^8.2.14"
+			}
+		},
+		"node_modules/postcss-selector-parser": {
+			"version": "6.0.10",
+			"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+			"integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+			"dev": true,
+			"dependencies": {
+				"cssesc": "^3.0.0",
+				"util-deprecate": "^1.0.2"
+			},
+			"engines": {
+				"node": ">=4"
+			}
+		},
 		"node_modules/postcss-value-parser": {
 			"version": "4.2.0",
 			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
 			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
 			"dev": true
 		},
+		"node_modules/queue-microtask": {
+			"version": "1.2.3",
+			"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+			"integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+			"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"
+				}
+			]
+		},
+		"node_modules/quick-lru": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
+			"integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
+			"dev": true,
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/read-cache": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+			"integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+			"dev": true,
+			"dependencies": {
+				"pify": "^2.3.0"
+			}
+		},
 		"node_modules/readdirp": {
 			"version": "3.6.0",
 			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -1117,6 +1427,16 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/reusify": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+			"integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+			"dev": true,
+			"engines": {
+				"iojs": ">=1.0.0",
+				"node": ">=0.10.0"
+			}
+		},
 		"node_modules/rimraf": {
 			"version": "2.7.1",
 			"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
@@ -1144,6 +1464,29 @@
 				"fsevents": "~2.3.2"
 			}
 		},
+		"node_modules/run-parallel": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+			"integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+			"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"
+				}
+			],
+			"dependencies": {
+				"queue-microtask": "^1.2.2"
+			}
+		},
 		"node_modules/sander": {
 			"version": "0.5.1",
 			"resolved": "https://registry.npmjs.org/sander/-/sander-0.5.1.tgz",
@@ -1346,6 +1689,96 @@
 				"typescript": "^4.1.2"
 			}
 		},
+		"node_modules/tailwindcss": {
+			"version": "3.1.8",
+			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.8.tgz",
+			"integrity": "sha512-YSneUCZSFDYMwk+TGq8qYFdCA3yfBRdBlS7txSq0LUmzyeqRe3a8fBQzbz9M3WS/iFT4BNf/nmw9mEzrnSaC0g==",
+			"dev": true,
+			"dependencies": {
+				"arg": "^5.0.2",
+				"chokidar": "^3.5.3",
+				"color-name": "^1.1.4",
+				"detective": "^5.2.1",
+				"didyoumean": "^1.2.2",
+				"dlv": "^1.1.3",
+				"fast-glob": "^3.2.11",
+				"glob-parent": "^6.0.2",
+				"is-glob": "^4.0.3",
+				"lilconfig": "^2.0.6",
+				"normalize-path": "^3.0.0",
+				"object-hash": "^3.0.0",
+				"picocolors": "^1.0.0",
+				"postcss": "^8.4.14",
+				"postcss-import": "^14.1.0",
+				"postcss-js": "^4.0.0",
+				"postcss-load-config": "^3.1.4",
+				"postcss-nested": "5.0.6",
+				"postcss-selector-parser": "^6.0.10",
+				"postcss-value-parser": "^4.2.0",
+				"quick-lru": "^5.1.1",
+				"resolve": "^1.22.1"
+			},
+			"bin": {
+				"tailwind": "lib/cli.js",
+				"tailwindcss": "lib/cli.js"
+			},
+			"engines": {
+				"node": ">=12.13.0"
+			},
+			"peerDependencies": {
+				"postcss": "^8.0.9"
+			}
+		},
+		"node_modules/tailwindcss/node_modules/glob-parent": {
+			"version": "6.0.2",
+			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+			"integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+			"dev": true,
+			"dependencies": {
+				"is-glob": "^4.0.3"
+			},
+			"engines": {
+				"node": ">=10.13.0"
+			}
+		},
+		"node_modules/tailwindcss/node_modules/postcss-load-config": {
+			"version": "3.1.4",
+			"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
+			"integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
+			"dev": true,
+			"dependencies": {
+				"lilconfig": "^2.0.5",
+				"yaml": "^1.10.2"
+			},
+			"engines": {
+				"node": ">= 10"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/postcss/"
+			},
+			"peerDependencies": {
+				"postcss": ">=8.0.9",
+				"ts-node": ">=9.0.0"
+			},
+			"peerDependenciesMeta": {
+				"postcss": {
+					"optional": true
+				},
+				"ts-node": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/tailwindcss/node_modules/yaml": {
+			"version": "1.10.2",
+			"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+			"integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+			"dev": true,
+			"engines": {
+				"node": ">= 6"
+			}
+		},
 		"node_modules/to-regex-range": {
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -1377,9 +1810,9 @@
 			}
 		},
 		"node_modules/update-browserslist-db": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.4.tgz",
-			"integrity": "sha512-jnmO2BEGUjsMOe/Fg9u0oczOe/ppIDZPebzccl1yDWGLFP16Pa1/RM5wEoKYPG2zstNcDuAStejyxsOuKINdGA==",
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.5.tgz",
+			"integrity": "sha512-dteFFpCyvuDdr9S/ff1ISkKt/9YZxKjI9WlRR99c180GaztJtRa/fn18FdxGVKVsnPY7/a/FDN68mcvUmP4U7Q==",
 			"dev": true,
 			"funding": [
 				{
@@ -1402,6 +1835,12 @@
 				"browserslist": ">= 4.21.0"
 			}
 		},
+		"node_modules/util-deprecate": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+			"dev": true
+		},
 		"node_modules/vite": {
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/vite/-/vite-3.0.3.tgz",
@@ -1449,6 +1888,15 @@
 			"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
 			"dev": true
 		},
+		"node_modules/xtend": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+			"integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.4"
+			}
+		},
 		"node_modules/yaml": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.1.1.tgz",
@@ -1460,6 +1908,32 @@
 		}
 	},
 	"dependencies": {
+		"@nodelib/fs.scandir": {
+			"version": "2.1.5",
+			"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+			"integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+			"dev": true,
+			"requires": {
+				"@nodelib/fs.stat": "2.0.5",
+				"run-parallel": "^1.1.9"
+			}
+		},
+		"@nodelib/fs.stat": {
+			"version": "2.0.5",
+			"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+			"integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+			"dev": true
+		},
+		"@nodelib/fs.walk": {
+			"version": "1.2.8",
+			"resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+			"integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+			"dev": true,
+			"requires": {
+				"@nodelib/fs.scandir": "2.1.5",
+				"fastq": "^1.6.0"
+			}
+		},
 		"@rollup/pluginutils": {
 			"version": "4.2.1",
 			"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
@@ -1505,6 +1979,29 @@
 				"@types/node": "*"
 			}
 		},
+		"acorn": {
+			"version": "7.4.1",
+			"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+			"integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+			"dev": true
+		},
+		"acorn-node": {
+			"version": "1.8.2",
+			"resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
+			"integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
+			"dev": true,
+			"requires": {
+				"acorn": "^7.0.0",
+				"acorn-walk": "^7.0.0",
+				"xtend": "^4.0.2"
+			}
+		},
+		"acorn-walk": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
+			"integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
+			"dev": true
+		},
 		"anymatch": {
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
@@ -1515,14 +2012,20 @@
 				"picomatch": "^2.0.4"
 			}
 		},
+		"arg": {
+			"version": "5.0.2",
+			"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+			"integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+			"dev": true
+		},
 		"autoprefixer": {
-			"version": "10.4.7",
-			"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.7.tgz",
-			"integrity": "sha512-ypHju4Y2Oav95SipEcCcI5J7CGPuvz8oat7sUtYj3ClK44bldfvtvcxK6IEK++7rqB7YchDGzweZIBG+SD0ZAA==",
+			"version": "10.4.8",
+			"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.8.tgz",
+			"integrity": "sha512-75Jr6Q/XpTqEf6D2ltS5uMewJIx5irCU1oBYJrWjFenq/m12WRRrz6g15L1EIoYvPLXTbEry7rDOwrcYNj77xw==",
 			"dev": true,
 			"requires": {
-				"browserslist": "^4.20.3",
-				"caniuse-lite": "^1.0.30001335",
+				"browserslist": "^4.21.3",
+				"caniuse-lite": "^1.0.30001373",
 				"fraction.js": "^4.2.0",
 				"normalize-range": "^0.1.2",
 				"picocolors": "^1.0.0",
@@ -1561,15 +2064,15 @@
 			}
 		},
 		"browserslist": {
-			"version": "4.21.1",
-			"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.1.tgz",
-			"integrity": "sha512-Nq8MFCSrnJXSc88yliwlzQe3qNe3VntIjhsArW9IJOEPSHNx23FalwApUVbzAWABLhYJJ7y8AynWI/XM8OdfjQ==",
+			"version": "4.21.3",
+			"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.3.tgz",
+			"integrity": "sha512-898rgRXLAyRkM1GryrrBHGkqA5hlpkV5MhtZwg9QXeiyLUYs2k00Un05aX5l2/yJIOObYKOpS2JNo8nJDE7fWQ==",
 			"dev": true,
 			"requires": {
-				"caniuse-lite": "^1.0.30001359",
-				"electron-to-chromium": "^1.4.172",
-				"node-releases": "^2.0.5",
-				"update-browserslist-db": "^1.0.4"
+				"caniuse-lite": "^1.0.30001370",
+				"electron-to-chromium": "^1.4.202",
+				"node-releases": "^2.0.6",
+				"update-browserslist-db": "^1.0.5"
 			}
 		},
 		"buffer-crc32": {
@@ -1578,10 +2081,16 @@
 			"integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
 			"dev": true
 		},
+		"camelcase-css": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+			"integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+			"dev": true
+		},
 		"caniuse-lite": {
-			"version": "1.0.30001366",
-			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001366.tgz",
-			"integrity": "sha512-yy7XLWCubDobokgzudpkKux8e0UOOnLHE6mlNJBzT3lZJz6s5atSEzjoL+fsCPkI0G8MP5uVdDx1ur/fXEWkZA==",
+			"version": "1.0.30001383",
+			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001383.tgz",
+			"integrity": "sha512-swMpEoTp5vDoGBZsYZX7L7nXHe6dsHxi9o6/LKf/f0LukVtnrxly5GVb/fWdCDTqi/yw6Km6tiJ0pmBacm0gbg==",
 			"dev": true
 		},
 		"chokidar": {
@@ -1600,12 +2109,24 @@
 				"readdirp": "~3.6.0"
 			}
 		},
+		"color-name": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+			"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+			"dev": true
+		},
 		"concat-map": {
 			"version": "0.0.1",
 			"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
 			"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
 			"dev": true
 		},
+		"cssesc": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+			"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+			"dev": true
+		},
 		"debug": {
 			"version": "4.3.4",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -1626,16 +2147,45 @@
 			"integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
 			"dev": true
 		},
+		"defined": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
+			"integrity": "sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ==",
+			"dev": true
+		},
 		"detect-indent": {
 			"version": "6.1.0",
 			"resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-6.1.0.tgz",
 			"integrity": "sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==",
 			"dev": true
 		},
+		"detective": {
+			"version": "5.2.1",
+			"resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
+			"integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
+			"dev": true,
+			"requires": {
+				"acorn-node": "^1.8.2",
+				"defined": "^1.0.0",
+				"minimist": "^1.2.6"
+			}
+		},
+		"didyoumean": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+			"integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+			"dev": true
+		},
+		"dlv": {
+			"version": "1.1.3",
+			"resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+			"integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+			"dev": true
+		},
 		"electron-to-chromium": {
-			"version": "1.4.188",
-			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.188.tgz",
-			"integrity": "sha512-Zpa1+E+BVmD/orkyz1Z2dAT1XNUuVAHB3GrogfyY66dXN0ZWSsygI8+u6QTDai1ZayLcATDJpcv2Z2AZjEcr1A==",
+			"version": "1.4.232",
+			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.232.tgz",
+			"integrity": "sha512-nd+FW8xHjM+PxNWG44nKnwHaBDdVpJUZuI2sS2JJPt/QpdombnmoCRWEEQNnzaktdIQhsNWdD+dlqxwO8Bn99g==",
 			"dev": true
 		},
 		"es6-promise": {
@@ -1824,6 +2374,28 @@
 			"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
 			"dev": true
 		},
+		"fast-glob": {
+			"version": "3.2.11",
+			"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
+			"integrity": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==",
+			"dev": true,
+			"requires": {
+				"@nodelib/fs.stat": "^2.0.2",
+				"@nodelib/fs.walk": "^1.2.3",
+				"glob-parent": "^5.1.2",
+				"merge2": "^1.3.0",
+				"micromatch": "^4.0.4"
+			}
+		},
+		"fastq": {
+			"version": "1.13.0",
+			"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
+			"integrity": "sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==",
+			"dev": true,
+			"requires": {
+				"reusify": "^1.0.4"
+			}
+		},
 		"fill-range": {
 			"version": "7.0.1",
 			"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -1986,6 +2558,22 @@
 				"sourcemap-codec": "^1.4.8"
 			}
 		},
+		"merge2": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+			"integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+			"dev": true
+		},
+		"micromatch": {
+			"version": "4.0.5",
+			"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+			"integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+			"dev": true,
+			"requires": {
+				"braces": "^3.0.2",
+				"picomatch": "^2.3.1"
+			}
+		},
 		"min-indent": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@@ -2055,6 +2643,12 @@
 			"integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
 			"dev": true
 		},
+		"object-hash": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+			"integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+			"dev": true
+		},
 		"once": {
 			"version": "1.4.0",
 			"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -2097,10 +2691,16 @@
 			"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
 			"dev": true
 		},
+		"pify": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+			"integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+			"dev": true
+		},
 		"postcss": {
-			"version": "8.4.14",
-			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
-			"integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+			"version": "8.4.16",
+			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
+			"integrity": "sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==",
 			"dev": true,
 			"requires": {
 				"nanoid": "^3.3.4",
@@ -2108,6 +2708,26 @@
 				"source-map-js": "^1.0.2"
 			}
 		},
+		"postcss-import": {
+			"version": "14.1.0",
+			"resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
+			"integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
+			"dev": true,
+			"requires": {
+				"postcss-value-parser": "^4.0.0",
+				"read-cache": "^1.0.0",
+				"resolve": "^1.1.7"
+			}
+		},
+		"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,
+			"requires": {
+				"camelcase-css": "^2.0.1"
+			}
+		},
 		"postcss-load-config": {
 			"version": "4.0.1",
 			"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz",
@@ -2118,12 +2738,52 @@
 				"yaml": "^2.1.1"
 			}
 		},
+		"postcss-nested": {
+			"version": "5.0.6",
+			"resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz",
+			"integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==",
+			"dev": true,
+			"requires": {
+				"postcss-selector-parser": "^6.0.6"
+			}
+		},
+		"postcss-selector-parser": {
+			"version": "6.0.10",
+			"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+			"integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+			"dev": true,
+			"requires": {
+				"cssesc": "^3.0.0",
+				"util-deprecate": "^1.0.2"
+			}
+		},
 		"postcss-value-parser": {
 			"version": "4.2.0",
 			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
 			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
 			"dev": true
 		},
+		"queue-microtask": {
+			"version": "1.2.3",
+			"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+			"integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+			"dev": true
+		},
+		"quick-lru": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
+			"integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
+			"dev": true
+		},
+		"read-cache": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+			"integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+			"dev": true,
+			"requires": {
+				"pify": "^2.3.0"
+			}
+		},
 		"readdirp": {
 			"version": "3.6.0",
 			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -2144,6 +2804,12 @@
 				"supports-preserve-symlinks-flag": "^1.0.0"
 			}
 		},
+		"reusify": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+			"integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+			"dev": true
+		},
 		"rimraf": {
 			"version": "2.7.1",
 			"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
@@ -2162,6 +2828,15 @@
 				"fsevents": "~2.3.2"
 			}
 		},
+		"run-parallel": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+			"integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+			"dev": true,
+			"requires": {
+				"queue-microtask": "^1.2.2"
+			}
+		},
 		"sander": {
 			"version": "0.5.1",
 			"resolved": "https://registry.npmjs.org/sander/-/sander-0.5.1.tgz",
@@ -2278,6 +2953,63 @@
 				"pascal-case": "^3.1.1"
 			}
 		},
+		"tailwindcss": {
+			"version": "3.1.8",
+			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.8.tgz",
+			"integrity": "sha512-YSneUCZSFDYMwk+TGq8qYFdCA3yfBRdBlS7txSq0LUmzyeqRe3a8fBQzbz9M3WS/iFT4BNf/nmw9mEzrnSaC0g==",
+			"dev": true,
+			"requires": {
+				"arg": "^5.0.2",
+				"chokidar": "^3.5.3",
+				"color-name": "^1.1.4",
+				"detective": "^5.2.1",
+				"didyoumean": "^1.2.2",
+				"dlv": "^1.1.3",
+				"fast-glob": "^3.2.11",
+				"glob-parent": "^6.0.2",
+				"is-glob": "^4.0.3",
+				"lilconfig": "^2.0.6",
+				"normalize-path": "^3.0.0",
+				"object-hash": "^3.0.0",
+				"picocolors": "^1.0.0",
+				"postcss": "^8.4.14",
+				"postcss-import": "^14.1.0",
+				"postcss-js": "^4.0.0",
+				"postcss-load-config": "^3.1.4",
+				"postcss-nested": "5.0.6",
+				"postcss-selector-parser": "^6.0.10",
+				"postcss-value-parser": "^4.2.0",
+				"quick-lru": "^5.1.1",
+				"resolve": "^1.22.1"
+			},
+			"dependencies": {
+				"glob-parent": {
+					"version": "6.0.2",
+					"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+					"integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+					"dev": true,
+					"requires": {
+						"is-glob": "^4.0.3"
+					}
+				},
+				"postcss-load-config": {
+					"version": "3.1.4",
+					"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
+					"integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
+					"dev": true,
+					"requires": {
+						"lilconfig": "^2.0.5",
+						"yaml": "^1.10.2"
+					}
+				},
+				"yaml": {
+					"version": "1.10.2",
+					"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+					"integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+					"dev": true
+				}
+			}
+		},
 		"to-regex-range": {
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -2299,15 +3031,21 @@
 			"peer": true
 		},
 		"update-browserslist-db": {
-			"version": "1.0.4",
-			"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.4.tgz",
-			"integrity": "sha512-jnmO2BEGUjsMOe/Fg9u0oczOe/ppIDZPebzccl1yDWGLFP16Pa1/RM5wEoKYPG2zstNcDuAStejyxsOuKINdGA==",
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.5.tgz",
+			"integrity": "sha512-dteFFpCyvuDdr9S/ff1ISkKt/9YZxKjI9WlRR99c180GaztJtRa/fn18FdxGVKVsnPY7/a/FDN68mcvUmP4U7Q==",
 			"dev": true,
 			"requires": {
 				"escalade": "^3.1.1",
 				"picocolors": "^1.0.0"
 			}
 		},
+		"util-deprecate": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+			"dev": true
+		},
 		"vite": {
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/vite/-/vite-3.0.3.tgz",
@@ -2327,6 +3065,12 @@
 			"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
 			"dev": true
 		},
+		"xtend": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+			"integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+			"dev": true
+		},
 		"yaml": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.1.1.tgz",
diff --git a/package.json b/package.json
index 6de2a1f..668cde5 100644
--- a/package.json
+++ b/package.json
@@ -10,12 +10,13 @@
 	},
 	"devDependencies": {
 		"@sveltejs/vite-plugin-svelte": "^1.0.1",
-		"autoprefixer": "^10.4.7",
-		"postcss": "^8.4.14",
+		"autoprefixer": "^10.4.8",
+		"postcss": "^8.4.16",
 		"postcss-load-config": "^4.0.1",
 		"sass": "^1.53.0",
 		"svelte": "^3.49.0",
 		"svelte-preprocess": "^4.10.7",
+		"tailwindcss": "^3.1.8",
 		"vite": "^3.0.0"
 	},
 	"dependencies": {
diff --git a/src/App.svelte b/src/App.svelte
index aacf0c4..a82e7e3 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -3,12 +3,16 @@
 	import './main.scss'
 
 	import Game from './routes/game.svelte'
+	import Quiz from './routes/quiz.svelte'
 	import Try from './routes/try.svelte'
 </script>
 
 <main>
 	<Router>
 		<Route path="/">
+			<Quiz />
+		</Route>
+		<Route path="/game">
 			<Try />
 		</Route>
 	</Router>
@@ -19,6 +23,9 @@
 		height: 100%;
 		display: flex;
 		justify-content: center;
+		justify-self: center;
 		width: 100%;
+		max-width: 768px;
+		/*overflow: hidden;*/
 	}
 </style>
diff --git a/src/app.css b/src/app.css
new file mode 100644
index 0000000..b5c61c9
--- /dev/null
+++ b/src/app.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/src/lib/Button.svelte b/src/lib/Components/Button.svelte
similarity index 75%
rename from src/lib/Button.svelte
rename to src/lib/Components/Button.svelte
index 43dab96..1731d93 100644
--- a/src/lib/Button.svelte
+++ b/src/lib/Components/Button.svelte
@@ -1,8 +1,12 @@
 <script>
+	import { navigate } from 'svelte-routing'
+
 	export let primary = false
+	export let style = ''
+	export let href = ''
 </script>
 
-<button on:click class:primary>
+<button {style} on:click={() => navigate(href)} on:click class:primary>
 	<slot />
 </button>
 
@@ -24,6 +28,9 @@
 		background-color: rgb(232, 232, 232);
 		color: #4263eb;
 
+		word-break: break-word;
+		overflow: auto;
+
 		&.primary {
 			color: #110042;
 			background-color: rgba(150, 221, 255);
diff --git a/src/lib/Heading.svelte b/src/lib/Components/Heading.svelte
similarity index 100%
rename from src/lib/Heading.svelte
rename to src/lib/Components/Heading.svelte
diff --git a/src/lib/Image.svelte b/src/lib/Components/Image.svelte
similarity index 100%
rename from src/lib/Image.svelte
rename to src/lib/Components/Image.svelte
diff --git a/src/lib/Ota/Icons/Point.svelte b/src/lib/Components/MyComponents/Icons/Point.svelte
similarity index 100%
rename from src/lib/Ota/Icons/Point.svelte
rename to src/lib/Components/MyComponents/Icons/Point.svelte
diff --git a/src/lib/Ota/Icons/Share.svelte b/src/lib/Components/MyComponents/Icons/Share.svelte
similarity index 100%
rename from src/lib/Ota/Icons/Share.svelte
rename to src/lib/Components/MyComponents/Icons/Share.svelte
diff --git a/src/lib/Ota/Icons/Star.svelte b/src/lib/Components/MyComponents/Icons/Star.svelte
similarity index 100%
rename from src/lib/Ota/Icons/Star.svelte
rename to src/lib/Components/MyComponents/Icons/Star.svelte
diff --git a/src/lib/Ota/ImageSlider.svelte b/src/lib/Components/MyComponents/ImageSlider.svelte
similarity index 100%
rename from src/lib/Ota/ImageSlider.svelte
rename to src/lib/Components/MyComponents/ImageSlider.svelte
diff --git a/src/lib/Components/MyComponents/Layout.svelte b/src/lib/Components/MyComponents/Layout.svelte
new file mode 100644
index 0000000..1fb1a35
--- /dev/null
+++ b/src/lib/Components/MyComponents/Layout.svelte
@@ -0,0 +1,11 @@
+<div>
+	<slot />
+</div>
+
+<style>
+	div {
+		height: 100%;
+		width: 100%;
+		/*border: 1px solid grey;*/
+	}
+</style>
diff --git a/src/lib/Components/MyComponents/Quiz/Heading.svelte b/src/lib/Components/MyComponents/Quiz/Heading.svelte
new file mode 100644
index 0000000..23d29a4
--- /dev/null
+++ b/src/lib/Components/MyComponents/Quiz/Heading.svelte
@@ -0,0 +1,17 @@
+<script>
+	export let style = ''
+</script>
+
+<div {style}>
+	<slot />
+</div>
+
+<style>
+	div {
+		height: var(--quizHeader);
+		width: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+</style>
diff --git a/src/lib/Components/MyComponents/Quiz/QuizWrap.svelte b/src/lib/Components/MyComponents/Quiz/QuizWrap.svelte
new file mode 100644
index 0000000..bb231ef
--- /dev/null
+++ b/src/lib/Components/MyComponents/Quiz/QuizWrap.svelte
@@ -0,0 +1,13 @@
+<script>
+</script>
+
+<section>
+	<slot />
+</section>
+
+<style>
+	section {
+		display: flex;
+		padding: 10px;
+	}
+</style>
diff --git a/src/lib/Components/MyComponents/Quiz/answers/CheckBox.svelte b/src/lib/Components/MyComponents/Quiz/answers/CheckBox.svelte
new file mode 100644
index 0000000..35c8a32
--- /dev/null
+++ b/src/lib/Components/MyComponents/Quiz/answers/CheckBox.svelte
@@ -0,0 +1,36 @@
+<script>
+	export let style = ''
+	export let checked = false
+	export let size = '50px'
+</script>
+
+<div style="{style}; height: {size}">
+	<input style="width:{size}" bind:checked type="checkbox" on:input />
+	<span><slot /></span>
+</div>
+
+<style lang="scss">
+	div {
+		height: 100%;
+		width: 100%;
+		background: white;
+		display: flex;
+		justify-content: flex-start;
+		gap: 20px;
+		padding: 4px;
+
+		span {
+			font-size: 100%;
+			width: 100%;
+			height: 100%;
+			display: flex;
+			align-items: center;
+			font-size: 140%;
+		}
+		input {
+			border: 4px solid var(--blue);
+			box-shadow: 0 0 4px var(--blue), 0 0 1px var(--blue) inset;
+			border-radius: var(--border-radius);
+		}
+	}
+</style>
diff --git a/src/lib/Components/MyComponents/Quiz/answers/Input.svelte b/src/lib/Components/MyComponents/Quiz/answers/Input.svelte
new file mode 100644
index 0000000..7e3fdab
--- /dev/null
+++ b/src/lib/Components/MyComponents/Quiz/answers/Input.svelte
@@ -0,0 +1,22 @@
+<script>
+	export let style = ''
+	export let value, type
+</script>
+
+{#if type === 'text'}
+	<input {style} bind:value type="text" />
+{:else if type === 'number'}
+	<input {style} bind:value type="number" />
+{/if}
+
+<style>
+	input {
+		height: 100%;
+		width: 100%;
+		background: white;
+		border: 4px solid var(--blue);
+		box-shadow: 0 0 4px var(--blue), 0 0 1px var(--blue) inset;
+		border-radius: var(--border-radius);
+		text-align: center;
+	}
+</style>
diff --git a/src/lib/Components/MyComponents/Sharebutton.svelte b/src/lib/Components/MyComponents/Sharebutton.svelte
new file mode 100644
index 0000000..5742c7e
--- /dev/null
+++ b/src/lib/Components/MyComponents/Sharebutton.svelte
@@ -0,0 +1,56 @@
+<script>
+	import IconShare from './Icons/Share.svelte'
+	export let shareData
+
+	const share = async () => {
+		if (navigator.canShare(shareData)) {
+			await navigator.share(shareData)
+		} else {
+			navigator.clipboard.writeText(shareData.url)
+		}
+	}
+</script>
+
+<button on:click={share}>
+	<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+		<g filter="url(#filter0_i_956_444)">
+			<rect width="42" height="42" fill="url(#share_svelteSvgPictureid)" />
+		</g>
+		<defs>
+			<filter id="filter0_i_956_444" x="0" y="0" width="42" height="42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+				<feFlood flood-opacity="0" result="BackgroundImageFix" />
+				<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+				<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+				<feOffset dx="436" dy="4" />
+				<feGaussianBlur stdDeviation="2" />
+				<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+				<feColorMatrix type="matrix" values="0 0 0 0 0.258824 0 0 0 0 0.388235 0 0 0 0 0.921569 0 0 0 1 0" />
+				<feBlend mode="normal" in2="shape" result="effect1_innerShadow_956_444" />
+			</filter>
+			<pattern id="share_svelteSvgPictureid" patternContentUnits="objectBoundingBox" width="1" height="1">
+				<use xlink:href="#image0_956_444" transform="scale(0.00520833)" />
+			</pattern>
+			<image
+				id="image0_956_444"
+				width="192"
+				height="192"
+				xlink:href="data:image/png;base64,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"
+			/>
+		</defs>
+	</svg>
+</button>
+
+<style lang="scss">
+	button {
+		cursor: pointer;
+		background: #e8e8e8;
+		border-radius: 16px;
+		z-index: 6;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 10px;
+		border: none;
+		outline: none;
+	}
+</style>
diff --git a/src/lib/Ota/Bubble.svelte b/src/lib/Components/MyComponents/game/Bubble.svelte
similarity index 100%
rename from src/lib/Ota/Bubble.svelte
rename to src/lib/Components/MyComponents/game/Bubble.svelte
diff --git a/src/lib/Ota/Heading.svelte b/src/lib/Components/MyComponents/game/Heading.svelte
similarity index 100%
rename from src/lib/Ota/Heading.svelte
rename to src/lib/Components/MyComponents/game/Heading.svelte
diff --git a/src/lib/Ota/Map.svelte b/src/lib/Components/MyComponents/game/Map.svelte
similarity index 100%
rename from src/lib/Ota/Map.svelte
rename to src/lib/Components/MyComponents/game/Map.svelte
diff --git a/src/lib/Ota/Tab.svelte b/src/lib/Components/MyComponents/game/Tab.svelte
similarity index 60%
rename from src/lib/Ota/Tab.svelte
rename to src/lib/Components/MyComponents/game/Tab.svelte
index 117fbe1..48b713b 100644
--- a/src/lib/Ota/Tab.svelte
+++ b/src/lib/Components/MyComponents/game/Tab.svelte
@@ -1,5 +1,5 @@
 <script>
-	import Sharebutton from './Sharebutton.svelte'
+	import Sharebutton from '../Sharebutton.svelte'
 	export let shareData
 </script>
 
@@ -7,7 +7,7 @@
 	<Sharebutton {shareData} />
 </div>
 
-<style>
+<style lang="scss">
 	div {
 		width: 100%;
 		height: calc(100% - 75%);
@@ -18,5 +18,12 @@
 		top: 0;
 		padding: 50px;
 		background: none;
+		position: fixed;
+		clip-path: inset(0);
+		z-index: 6;
+
+		@media (min-width: 768px) {
+			position: absolute;
+		}
 	}
 </style>
diff --git a/src/lib/Overlay.svelte b/src/lib/Components/Overlay.svelte
similarity index 52%
rename from src/lib/Overlay.svelte
rename to src/lib/Components/Overlay.svelte
index ba920a1..3adeb8b 100644
--- a/src/lib/Overlay.svelte
+++ b/src/lib/Components/Overlay.svelte
@@ -1,36 +1,38 @@
 <script>
 	export let img
-	export let shareData
+	export let shareData = null
 	export let alt = 'background image'
-	import Tab from './Ota/Tab.svelte'
+	import Tab from './MyComponents/game/Tab.svelte'
+	import Layout from './MyComponents/Layout.svelte'
 </script>
 
-<section class="container">
-	<img src={img} {alt} />
-	<Tab {shareData} />
-	<section class="overlay">
-		<slot />
+<Layout>
+	<section class="container">
+		<img src={img} {alt} />
+		{#if shareData !== null && shareData !== false}
+			<Tab {shareData} />
+		{/if}
+		<section class="overlay">
+			<slot />
+		</section>
 	</section>
-</section>
+</Layout>
 
 <style lang="scss">
 	.container {
 		position: relative;
 		height: 100%;
 		width: 100%;
-		max-width: 768px;
 
 		.overlay {
-			height: 75vh;
+			min-height: 75vh;
+			height: auto;
 			width: 100%;
 			overflow-y: auto;
 			position: absolute;
 			top: 25%;
 			border-radius: 70px 70px 0 0;
-			/*padding-left: 52px;
-			padding-right: 52px;
-			padding-top: 52px;*/
-			padding: 52px; /*provedena změna-OtaProkopec*/
+			padding: 52px;
 			display: flex;
 			flex-direction: column;
 			row-gap: 35px;
@@ -44,6 +46,11 @@
 			height: auto;
 			min-height: 25%;
 			max-height: 100%;
+			position: fixed;
+
+			@media (min-width: 768px) {
+				position: relative;
+			}
 		}
 	}
 </style>
diff --git a/src/lib/Section.svelte b/src/lib/Components/Section.svelte
similarity index 77%
rename from src/lib/Section.svelte
rename to src/lib/Components/Section.svelte
index c0f2f58..b19829e 100644
--- a/src/lib/Section.svelte
+++ b/src/lib/Components/Section.svelte
@@ -1,9 +1,10 @@
 <script>
-	export let title
+	export let style = ''
+	export let title = ''
 </script>
 
-<section>
-	<h2>{title}</h2>
+<section {style}>
+	<h2><slot name="title">{title}</slot></h2>
 	<div><slot /></div>
 </section>
 
@@ -22,7 +23,6 @@
 		}
 
 		div {
-			color: rgba(0, 0, 0, 0.4);
 			font-style: normal;
 			font-weight: 400;
 			font-size: 20px;
diff --git a/src/lib/Ota/Sharebutton.svelte b/src/lib/Ota/Sharebutton.svelte
deleted file mode 100644
index 6e02849..0000000
--- a/src/lib/Ota/Sharebutton.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script>
-	import IconShare from './Icons/Share.svelte'
-	export let shareData
-
-	const share = async () => {
-		if (navigator.canShare(shareData)) {
-			await navigator.share(shareData)
-		} else {
-			navigator.clipboard.writeText(shareData.url)
-		}
-	}
-</script>
-
-<div on:click={share}>
-		<IconShare />
-</div>
-
-<style>
-	div {
-		height: 62px;
-		width: 62px;
-		cursor: pointer;
-		background: #e8e8e8;
-		border-radius: 16px;
-		z-index: 6;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-</style>
diff --git a/src/main.js b/src/main.js
index 7a2a62b..91f9d88 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,7 +1,8 @@
+import './app.css'
 import App from './App.svelte'
 
 const app = new App({
-	target: document.getElementById('app')
+	target: document.getElementById('app'),
 })
 
 export default app
diff --git a/src/main.scss b/src/main.scss
index 86dd493..a55ae27 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -16,6 +16,8 @@ body {
 #app {
 	width: 100%;
 	height: 100%;
+	justify-content: center;
+	display: flex;
 }
 
 h1,
@@ -28,4 +30,17 @@ p {
 	margin: 0;
 }
 
+
+
+:root {
+	--quizHeader: 300px;
+	--fontSize: 40px;
+	--blue: rgba(150, 221, 255);
+	--border-radius: 25px;
+	--grey: rgba(0, 0, 0, 0.4);
+}
+
+
+
 @import url("normalize.scss")
+
diff --git a/src/routes/game.svelte b/src/routes/game.svelte
index ae962ba..33d7d6d 100644
--- a/src/routes/game.svelte
+++ b/src/routes/game.svelte
@@ -1,20 +1,20 @@
 <script>
-	import Heading from '../lib/Ota/Heading.svelte'
-	import Overlay from '../lib/Overlay.svelte'
-	import Section from '../lib/Section.svelte'
-	import Button from '../lib/Button.svelte'
-	import Bubble from '../lib/Ota/Bubble.svelte'
-	import IconStar from '../lib/Ota/Icons/Star.svelte'
-	import IconPoint from '../lib/Ota/Icons/Point.svelte'
-	import Map from '../lib/Ota/Map.svelte'
-	import ImageSlider from '../lib/Ota/ImageSlider.svelte'
+	import Heading from '../lib/Components/MyComponents/game/Heading.svelte'
+	import Overlay from '../lib/Components/Overlay.svelte'
+	import Section from '../lib/Components/Section.svelte'
+	import Button from '../lib/Components/Button.svelte'
+	import Bubble from '../lib/Components/MyComponents/game/Bubble.svelte'
+	import IconStar from '../lib/Components/MyComponents/Icons/Star.svelte'
+	import IconPoint from '../lib/Components/MyComponents/Icons/Point.svelte'
+	import Map from '../lib/Components/MyComponents/game/Map.svelte'
+	import ImageSlider from '../lib/Components/MyComponents/ImageSlider.svelte'
 
-	export let backgound
+	export let background
 	export let assets
 	export let shareData
 </script>
 
-<Overlay {shareData} img={backgound}>
+<Overlay {shareData} img={background}>
 	<Heading>
 		<slot name="title" />
 		<div class="bubbles" slot="bubbles">
diff --git a/src/routes/quiz.svelte b/src/routes/quiz.svelte
new file mode 100644
index 0000000..29e3e7d
--- /dev/null
+++ b/src/routes/quiz.svelte
@@ -0,0 +1,83 @@
+<script>
+	import Heading from '../lib/Components/MyComponents/Quiz/Heading.svelte'
+	import Layout from '../lib/Components/MyComponents/Layout.svelte'
+	import Section from '../lib/Components/Section.svelte'
+	import Map from '../lib/Components/MyComponents/game/Map.svelte'
+	import Button from '../lib/Components/Button.svelte'
+	import Input from '../lib/Components/MyComponents/Quiz/answers/Input.svelte'
+	import CheckBox from '../lib/Components/MyComponents/Quiz/answers/Checkbox.svelte'
+
+	const popis = 'tohel dklfsdja fdsaj jklfdas fsadj lkjdfsa kl dsajfklasj asdlfkjaslk fasdklfj l'
+	const title = 'Nadpis úkolu'
+
+	let myAnswer = []
+	$: console.log(myAnswer, myAnswer[0])
+	const option = {
+		withButton: false,
+	}
+
+	let answers = [
+		{ label: '1 answer', checked: false },
+		{ label: '1 answer', checked: false },
+		{ label: '1 answer', checked: false },
+		{ label: '1 answer', checked: false },
+	]
+</script>
+
+<Layout>
+	<div class="wrap">
+		<Heading style="height: var(--quizHeader); position: relative; top: 0">
+			<div class="flex justify-center item-center flex-wrap gap-3">
+				<span class="title">{title}</span>
+				<span style="width: 85%"><Map /></span>
+			</div>
+		</Heading>
+		<Section style={'height: calc(100% - var(--quizHeader)); position: relative'}>
+			<div class="flex items-center justify-center flex-col w-full gap-24 p-4">
+				<div class="popis">
+					<span> Popis úkolu: </span>
+					<span>{popis}</span>
+				</div>
+				<div class="flex items-center justify-center flex-col w-full gap-6">
+					<!--<Input bind:value={myAnswer} style="width: 100%; min-width: 400px; max-width: 500px; height: 50px" />
+						<Button on:click={() => (myAnswer = i)} primary={true} style="min-width:400px;width:auto;max-width:750px;height:auto; max-height: 200px">{answer}</Button>
+						<Input type="number" bind:value={myAnswer} style="width: 100%; min-width: 400px; max-width: 500px; height: 50px" />
+					-->
+					{#each answers as { label, checked }, i}
+						<CheckBox bind:checked>{label}</CheckBox>
+					{/each}
+					{#if option.withButton}
+						<Button primary={true} style="width: 225px; height: 60px">commit</Button>
+					{/if}
+				</div>
+			</div>
+		</Section>
+	</div>
+</Layout>
+
+<style lang="scss">
+	.wrap {
+		height: 100%;
+		width: 100%;
+		display: flex;
+		flex-wrap: wrap;
+		flex-direction: column;
+
+		.title {
+			font-size: var(--fontSize);
+			font-weight: 600;
+		}
+
+		.popis {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			flex-direction: column;
+			font-size: 24px;
+			font-weight: 700;
+			text-align: center;
+			gap: 8px;
+			color: var(--grey);
+		}
+	}
+</style>
diff --git a/src/routes/try.svelte b/src/routes/try.svelte
index a85247e..3bc8598 100644
--- a/src/routes/try.svelte
+++ b/src/routes/try.svelte
@@ -9,7 +9,7 @@
 	let background = '/assets/temp/kar1.png'
 </script>
 
-<Overlay {shareData} {assets} backgound={background}>
+<Overlay {shareData} {assets} {background}>
 	<span slot="title">Tůra po Karláku</span>
 	<span slot="description">Vydejte se na napínavou pouť po zajímavostech největšího náměstí v Česku.</span>
 	<span slot="stars">4.5</span>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
new file mode 100644
index 0000000..c20cfa0
--- /dev/null
+++ b/tailwind.config.cjs
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	content: ['./index.html', './src/**/*.{html,svelte,js,ts}'],
+	theme: {
+		extend: {},
+	},
+	plugins: [],
+}
diff --git a/vite.config.js b/vite.config.js
index b2c7b0a..fb6bc94 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,20 +1,26 @@
 import { defineConfig } from 'vite'
 import { svelte } from '@sveltejs/vite-plugin-svelte'
 import sveltePreprocess from 'svelte-preprocess'
+import path from 'path'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+	resolve: {
+		alias: {
+			$lib: path.resolve(__dirname, 'src', 'lib'),
+		},
+	},
 	plugins: [
 		svelte({
 			preprocess: sveltePreprocess({
 				scss: true,
-				postcss: true
-			})
-		})
+				postcss: true,
+			}),
+		}),
 	],
 	build: {
 		rollupOptions: {
-			output: { entryFileNames: "assets/[name].js" }
-		}
-	}
+			output: { entryFileNames: 'assets/[name].js' },
+		},
+	},
 })